概念
兼容性:IE9
border-radius 用来设置边框圆角。
- 当使用一个半径时确定一个圆形;
- 当使用两个半径时确定一个椭圆
这个(椭)圆与边框的交集形成圆角效果。
即使元素没有边框,圆角也可以用到 background 上面,具体效果受 background-clip 影响。
这是一个简写属性,用来设置:
- border-top-left-radius
- border-top-right-radius
- border-bottom-right-radius
- border-bottom-left-radius
语法
有两种语法:
border-radius:2px 3px;
border-radius:2px 4px/6px;
圆形半径
半径的第一个语法取值可取1~4个值,定义四个角的圆角半径(非椭圆):
- 一个值
border-radius: radius
表示边框四角的圆角半径。只在单值语法中使用。
- 两个值
border-radius: top-left-and-bottom-right top-right-and-bottom-left
第一个值表示边框左上角和右下角的圆角半径。
第一个值表示边框右上角和左下角的圆角半径。
- 三个值
border-radius: top-left top-right-and-bottom-left bottom-right
第一个值为左上角;
第二个值为右上角和左下角;
第三个值为右下角。
- 四个值
border-radius:top-left top-right bottom-right bottom-left
从左上角开始顺时针声明四个角的值。
椭圆半径
半径的第二个语法,“/” 前后分别可取1~4个值,对应的角的顺序与第一种语法相同。
“/”前后相对应的第一个值与第二个值确定了一个角的椭圆半径。
border-radius: 1em/5em;
/* 等价于 */
border-top-left-radius: 1em 5em;
border-top-right-radius: 1em 5em;
border-bottom-right-radius: 1em 5em;
border-bottom-left-radius: 1em 5em;
border-radius: 4px 3px 6px / 2px 4px;
/*等价于*/
border-top-left-radius: 4px 2px;
border-top-right-radius: 3px 4px;
border-bottom-right-radius: 6px 2px;
border-bottom-left-radius: 3px 4px;
值
- length:定义圆形半径或椭圆的半长轴,半短轴。不能用负值。
- percentage:使用百分数定义圆形半径或椭圆的半长轴,半短轴。
水平半轴相对于盒模型的宽度;垂直半轴相对于盒模型的高度。不能用负值。
应用
除了为边框增加圆角之外,还可以用于绘制圆形及椭圆形。
要绘制一个正圆,首先要设置相同的height和width值。
然后将每个角的border-radius尺寸都指定为width/height的一半。
div{
width:100px;
height:100px;
background-color:lightgreen;
border-radius:50px; /* 或者50% */
}