圆角边框（border-radius属性、border-radius使用规则）

border-radius属性

你可以给任何元素制作 "圆角"。使用这个属性，我们要写一些浏览器的内核标识码：-webkit- 或 -moz- 前面的数字表示支持该前缀的第一个版本。

圆角属性：

border-radius	所有四个边角 border---radius 属性的缩写
border-top-left-radius	定义了左上角的弧度
border-top-right-radius	定义了右上角的弧度
border-bottom-right-radius	定义了右下角的弧度
border-bottom-left-radius	定义了左下角的弧度

    <title>border-radius属性</title><style>.box{width: 300px;height: 150px;background-color: pink;margin: 20px auto;/* 圆角半径 *//* border-top-left-radius: 50px;border-top-right-radius: 50px;border-bottom-right-radius: 50px;border-bottom-left-radius: 50px; */border-radius: 50px;}/* 绘制正圆（1）本身是一个正方形（2）圆角半径 取 宽度一半 或者设置为宽度的50% */.box1{width: 300px;height: 300px;background-color: pink;margin: 20px auto;/* 圆角半径 *//* border-radius: 150px; */border-radius: 50%;overflow: hidden;}</style>
</head>
<body><div class="box"></div><div class="box1"><img src="./imges/3.jpeg" alt="300"></div>
</body>

border-radius: 20px; 简写

等价于

border-top-left-radius: 20px; 全写 border-top-right-radius: 20px; border-bottom-right-radius: 20px; border-bottom-left-radius: 20px;

预览效果图

border-radius使用规则

border-radius指定值的使用规则

如果你要在四个角上一一指定，可以使用以下规则：

四个值: 第一个值为左上角，第二个值为右上角，第三个值为右下角，第四个值为左下角。
三个值: 第一个值为左上角, 第二个值为右上角和左下角，第三个值为右下角

        .box2{width: 300px;height: 100px;margin: 30px auto;background-color: green;border-radius: 20px 40px 30px;
}

两个值: 第一个值为左上角与右下角，第二个值为右上角与左下角

       .box3{width: 300px;height: 100px;margin: 30px auto;background-color: green;border-radius: 20px 70px;
}

一个值： 四个圆角值相同

    <style>.box{width: 300px;height: 150px;background-color: pink;margin: 20px auto;/* 圆角半径 *//* border-radius: 50px(左上) 20px(右上) 40px(右下) 10px(左下); *//* border-radius: 50px(左上) 100px（右上、左下） 20px;（左下） *//* border-radius: 300px（左上、右下） 100px; （右上、左下）*/border-radius: 300px 100px;}</style>
</head>
<body><div class="box"></div>
</body>

预览效果图

圆角边框（border-radius属性、border-radius使用规则）相关推荐

CSS边框、边距、轮廓（边框宽度/颜色/各边/简写属性/圆角边框/内外边距/高度宽度/框模型/轮廓宽度/颜色/属性/偏移）——万字长文|一文搞懂
目录 CSS边框 CSS 边框属性 CSS 边框样式实例 CSS 边框宽度实例特定边的宽度实例 CSS 边框颜色实例特定边框的颜色实例 HEX 值实例 RGB 值实例 HSL 值实 ...
css圆角框四周阴影,css3圆角边框，边框阴影
border-radius向元素添加圆角边框,css3中的.IE9+ chrome safari5+ firefox4+ 现在都支持.可以向input div等设置边框.与border相似,可以四个角 ...
面试官问我圆角边框，我交出了满分的答卷！——Web前端系列学习笔记
文章目录 border-radius 属性 border-radius的其他写法代码实例效果图 border-radius 属性 CSS3的圆角边框实际上是在矩形的四个角分别做内切圆,然后通过设置 ...
php边框圆角,css3圆角和圆角边框使用方法总结
在CSS3出现之前,想要实现圆角的效果可以通过图片或者用margin属性实现,传统的圆角生成方案,需要多张图片作为背景图案.CSS3出现以后,就不需要浪费时间去制作多张图片了,大大的减少了工作量,提高 ...
corners边框_第11天｜16天搞定前端，CSS的圆角边框，让人赏心悦目
有人可能会疑惑,我为什么专门用一节内容来说边框和圆角.其实,不为别的,只为它们在开发中,在Web系统中,在手机页面中,太常用了.有边框的页面,让人耳目一新,一目了然:有圆角的内容,让人赏心悦目,心旷神 ...
CSS / 圆角边框+阴影+浮动
目录圆角边框盒子阴影文字阴影传统网页布局的三种方式浮动浮动特性浮动元素经常和标准流父级搭配使用常见的网页布局案例浮动布局注意点圆角边框语法:border-radius: 半径; ...
uniapp 开发APP 安卓手机中在使用nvue时候 border的dashed和radius可能会有冲突的解决办法
uniapp 开发APP 安卓手机中在使用nvue时候 border的dashed和radius可能会有冲突的解决办法在开发中发现如果同时给了圆角和虚线虚线属性会有问题分别设置圆角四个角 ...
CSS盒子模型（border、padding、margin、圆角边框、盒子阴影、文字阴影、新闻列表综合案例、新浪导航栏案例）
1. 网页布局的本质首先利用CSS设置好盒子的大小,然后摆放盒子的位置. 最后把网页元素比如文字图片等等,放入盒子里面. 以上两步就是网页布局的本质 2. 盒子模型(Box Model) 盒子模型 ...
java border边框_简单实用的css边框属性border
本文主要讲述利用border属性做出不同的几何形状从而适用于比较好看的视觉样式. 预备知识 border相关属性 border-width 边框的宽度 border-style 边框的样式 borde ...

圆角边框（border-radius属性、border-radius使用规则）

border-radius属性

border-radius使用规则

圆角边框（border-radius属性、border-radius使用规则）相关推荐

最新文章

热门文章