CSS学习笔记：border-radius

概念

兼容性：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% */
}