【CSS3】关于border-radius

border-radius

给元素设置圆角边框属性

完整写法

border-radius: 1-4 length|% / 1-4 length|%;
                 水平半径        垂直半径

常用单位 px % em

• 仅设置一个值 四个方向统一

• 设置四个方向 顺序如下

a b c d

a ---- b
|      |
d ---- c

• 设置两个值
  对角线

a b

a ---- b
|      |
b ---- a

• 设置三个数值

a b c

a ---- b
|      |
b ---- c

单位

px ：半径为px的圆去与边角相切的弧度

% ：相对宽高百分比的r1 r2作为椭圆与边角相切的弧度

特殊用法

/* 椭圆 */
border-radius: 50% / 50%
/* 半椭圆 */
border-radius: 50% / 100% 100% 0 0