CSS形状之border-radius

开发者常用border-radius来将矩形更改为圆角矩形，大部分人写上例如border-radius:5px;就可以满足对网页布局形状的要求，但其实这个CSS属性可以这么玩。

border-radius的三种声明方式

border-radius: 10px;
border-radius: 2em;
border-radius: 50%;

border-radius指定不同弯曲程度下的显示结果

现设置四个width: 200px;height: 100px;的正方形div，弯曲程度分别设置如下：

border-radius: 10%;
border-radius: 25%;
border-radius: 40%;
border-radius: 50%;

当设置四个width: 200px;height: 100px;的正方形div，弯曲程度分别设置如下：

border-radius: 10%;
border-radius: 25%;
border-radius: 40%;
border-radius: 50%;

显示结果为：

border-radius分别指定各个角弯曲程度

当声明border-radius: 10px;时，相当于声明border-radius: 10px 10px 10px 10px;。
四个角的值分别为左上-右上-右下-左下顺时针旋转，类似于指定盒模型的margin,border,padding方式。
现将四个角指定为不同弯曲程度，结果如下：

border-radius: 10% 25% 40% 50%;

其中border-radius: 10% 25% 40% 50%;可以写成以下形式:

border-top-left-radius: 10%;
border-top-right-radius: 25%;
border-bottom-right-radius: 40%;
border-bottom-left-radius: 50%;

此为css3新增的属性。

为border-radius分别指定水平、竖直弯曲程度

如上图所示，border-radius每个角度的弯曲程度都包括水平弯曲长度和竖直弯曲长度。
border-radius：50%；相当于border-radius: 50%/50%;前面是水平弯曲长度，后面为竖直弯曲长度。其中50%是指弯曲的长度为矩形长度的50%

border-radius: 2em 1em 4em / 0.5em 3em;

等同于

border-top-left-radius: 2em 0.5em;
border-top-right-radius: 1em 3em;
border-bottom-right-radius: 4em 0.5em;
border-bottom-left-radius: 1em 3em;

实例

• 半圆形

border-radius: 50% / 100% 100% 0 0;

• 沿纵轴劈开的半椭圆

border-radius: 100% 0 0 100% / 50%;

• 四分之一椭圆

border-radius: 100% 0 0 0;

CSS技巧（二）：形状