13.3 为元素创建圆角
使用CSS3，可以在不引入额外的标记或图像的情况下，为大多数元素（包括表单元素、图像元素，甚至包括段落元素）创建圆角，如图13-2所示。同margin和padding属性一样，border-radius属性也有长、短两种形式的语法。
图13-2 为元素创建圆角
1.短形式语法
border-radius
当4个角的圆角半径相同时，例如都为20 px，可以写为：
当4个角的圆角半径不相同时，按照左上角、右上角、右下角、左下角的顺时针顺序书写，例如左上角为10 px，右上角为20 px，右下角为30 px，左下角为40 px，可以写为：
2.长形式语法
border-top-left-radius 左上角
border-top-right-radius 右上角
border-bottom-right-radius 右下角
border-bottom-left-radius 左下角
长形式语法分别设置4个角的圆角半径，常用于4个角的圆角半径不同的情况。
要做出图13-2所示的4个不同样式的圆角，先创建4个使用不同类的div，代码如下：
将4个div设置为大小、颜色相同的正方形，代码如下：
分别设置4个div的圆角半径为不同的值。
将第一个class为all-corners的div设为4个角的圆角半径均为20 px，这里使用的是短形式语法，代码如下：
将第二个class为one-corner的div设为只有左上角的圆角半径为75px，这里采用长形式语法书写，单独设置左上角，其他没有设置的3个角默认圆角半径为0，代码如下：
如果换作短形式语法，也可写为：
将第三个class为elliptical-corners的div设为左上角和右下角的圆角半径为40 px，右上角和左下角的圆角半径为10 px，这里采用短形式语法来书写，并采用了缩写的形式，如果只写两个属性值，第一个值表示左上角和右下角，第二个值表示右上角和左下角，代码如下：
这里用短形式语法也可写成4个属性值的形式，代码如下：
将第四个class为circle的div设为4个角的圆角半径均为75 px，由于该div的长和宽是150 px，将4个角圆角半径设为75 px，得到的效果是圆形，代码如下：
