CSS3圆角border-radius属性详解

CSS即层叠样式表(Cascading StyleSheet)，css3是css的最新版本，新增加了很多特性，如：css3动画 animation、Transform、Transition，CSS3渐变，CSS3圆角，文字特效，css3 Flexbox(伸缩盒布局)等等。回顾我们写边框圆角历程，最开始我们用4涨小图片（左上角，右上角，左下角，右下角）来实现边框圆角，后来进化到2涨背景图片（上，下），后来进化到1涨图片(css sprite)实现圆角，最后到现在CSS3 border-radius属性的出现，我们完全可以抛弃背景图片了，达到0图片实现边框圆角，并且不用增加额外的元素节点，也不会因为圆角图片而有额外的HTTP请求。

border-radius属性详解

单个圆角语法：

border-*-*-radius: [  <length> |  <%> ] [  <length> |  <%> ]？

列子：

border-top-left-radius: 10px 5px;
border-bottom-right-radius: 10% 5%;
border-top-right-radius: 10pt;

单个圆角语法详情：

名称：	border-top-left-radius、border-top-right-radius、border-bottom-right-radius、border-bottom-left-radius
取值：	[ <length> | <%> ]{1,2}
初始：	0
适用于：	所有元素
继承：	否
百分比：	相对于边框盒子相应的边.详情看下面说明
计算值：	两个绝对 <length> 或百分比值

说明：border-*-*-radius 属性的两个值决定了作为边框外边形状的四分之一椭圆的半径（请看下图）。第1个取值是水平半径，第2个值是垂直半径。若没有第2个取值，从第1个复製过来。若其中1个长度为零，则角是垂直的，不是圆角。作为水平半径的百分比值，取值相对於边框盒的宽度，作為垂直半径的百分比值，取值相对於边框盒的高度。

如果把一个div方框的水平半径设置为55pt，垂直半径为25pt，则代码如下：

 border-top-left-radius:55pt 25pt;
 border-top-right-radius:55pt 25pt;
 border-bottom-right-radius:55pt 25pt;
 border-bottom-left-radius:55pt 25pt;

上面讲的是CSS3圆角边框的单个角写法，4个圆角我们需要写4个属性，其实还有简写(缩写)方式，css3圆角简写方式只用写一个属性： border-radius(边框半径)即可达到上面讲的4个圆角效果，

CSS3简写（缩写）语法如下：

border-radius：[  <length> |  <percentage> ]{1,4} [ / [  <length> |  <percentage> ]{1,4} ]?

列子：

border-radius: 5px 10px 5px 10px / 10px 5px 10px 5px;
border-radius: 5px;
border-radius: 5px 10px / 10px;

CSS3简写（缩写）语法详情：

名称：	border-radius
取值：	[ <length> | <%> ]{1,4} [ / [ <length> | <%> ]{1,4} ]?
初始：	详细请看下面说明
适用于：	所有元素
计算值：	详细请看下面说明
百分比：	相对于边框盒子相应的边.

说明：border-radius简写可以用来设定四个属性 border-*-radius。若指定的值包含斜线，则斜线前面的取值会设定水平半径，斜线后面的取值会设定垂直半径，若没有斜线，则取值同时用来设定两个半径。每个半径的四个值按照左上、右上、右下、左下的顺序，若没有左下取值则使用右上取值，若没有右下取值则使用左上取值，若没有右上取值则使用左上取值。

上图的“把一个div方框的水平半径设置为55pt，垂直半径为25pt 的列子”4个圆角效果我们可以这样写：

border-radius:55pt / 25pt;

简写方式可以节省很多代码，所以实际开发中推荐用简写方式。

PS：测试圆角建议把div方框加上边线或者背景