border-radius 圆角
如果想要把元素边界变得圆润，不妨试试这个 属性 。
1. 官方定义
通过 CSS3，您能够创建圆角边框并且不需使用设计软件，比如 PhotoShop。
2. 解释
通过给 一个 html 元素 标签 的样式 增加 一条 border-radius 属性 ，让这个元素的边角由直角边变成圆弧。
3. 语法
它的 用法 遵循 css 通用的： 左上、 右上 、右下 、左下 的原则。
border-radius : value ;
属性 描述 border-radius 四个边角值 border-top-left-radius 左上角 圆弧值 border-top-right-radius 右上角圆弧值 border-b ott om-right-radius 右下角圆弧值 border-b ott om-left-radius 左下角圆弧值
包含参数
参数 名称 参数类型 value ‘%’ | ‘px’ | ‘rem’
只有 一个 参数时：
border-radius:value;
value 代表给这个元素 4 个方向 增加 一个 的圆弧值。
只有两个参数时，中间用空格分开：
border-radius:value1 value2;
value1 代表 左上、右下，value2 代表 右上、左下角圆弧值。
只有三个参数时，中间用空格分开：
border-radius:value1 value2 value3;
value1 代表左上 value2 代表 右上 左下 value3 代表右下
4. 有四个参数时，中间用空格分开
border-radius:value1 value2 value3 value3;
value1 ~ value4 分别代表左上、 右上 、右下 、左下四个角的圆弧值
4. 兼容性
IE Edge Firefox Chrome Safari Opera ios android 9 all all all all all all all
5. 示例
给 demo 增加 右上和左下的圆角
< div class = " demo " > </ div >
可以这样
.demo {
border-radius : px px ;
}
推荐第一种写法，但是也可以这样
.demo {
border-top-right-radius : px ;
border-b ott om-left-radius : px ;
}
效果 图
demo 增加 右上和左下的圆角 效果 图
制作 一个 带有圆角的卡片
< div class = " card " >
< div class = " text " >
demo1
</ div >
</ div >
.card {
background : red ;
width : px ;
height : px ;
line-height : px ;
text-align : center ;
border-radius : px ;
}
.text {
dis play : inline-block ;
width : px ;
height : px ;
line-height : px ;
background : #fff ;
border-radius : ;
}
效果 图
带有圆角的卡片 效果 图
给 一个 table 增加 圆角左上和右上是 8px 右下和左下是直角
< table >
< tr >
< td > 姓名 </ td > < td > 年龄 </ td >
</ tr >
< tr >
< td > demo </ td > < td > 19 </ td >
</ tr >
</ table >
table {
background : red ;
border-radius : px px ;
font-size : px ;
color : #fff ;
border-collapse : collapse ;
overflow : hidden ;
}
`table` 增加 圆角左上和右上是 8px 右下和左下是直角 效果 图
6. 经验 分享
border-radius：50% 会让 一个 宽度和高度相等的块级元素变成 一个 圆。
.demo {
width : px ;
height : px ;
border-radius：
}
设置 50% 的好处就是不用再去计算他的宽高，例如上面这个例子 border-radius:50px 同样可以让这个元素变成 一个 圆。
2. 如果圆角过大，记得要设定 padding ，这样可以避免里面的 内容 超出元素。
7. 小结
不要让 border-radius 的 % 值大于 50，因为如果两个相邻的半径和超过了对应的盒子的边的长度，那么浏览器要重新计算以保证它们不重合。虽然表面上看没有问题但是这样会对 性能 有影响。 如果用 rem 、 em 单位在移动端用 border-radius 画圆，在部分机型里面是椭圆的问题，可以通过 50% 来 解决 ，或者使用 px 配合缩放 scale 来实现 rem 单位的 效果 。 在内联元素 span 这类 标签 使用这个 属性 的时候同样有效但是记得不要使用 % 这样会导致一些 span 标签 的圆角不一样因为 % 是参考长和宽计算的。 border-radius 圆角并不会隐藏 标签 内部元素的 内容 ，如果有 内容 溢出的情况记得 增加 overflow:hidden; 任何元素都可以使用这个 属性 , 包括 视频、音频 标签 等等。 一般情况下不推荐 border-top-left-radius 这类的写法除非是需要在某种交互过程中需要改变其中 一个 的圆角值而其它的保持不变。因为这类的 标签 会影响浏览器渲染的 性能 。
box-shadow 阴影 ? ?borderImage 边框图片查看更多关于border-radius 圆角的详细内容...