现在有了 CSS3 的 border-radius 特性之后，实现边框圆角效果就非常简单了，而且其还有多个优点：一是减少网站维护工作量；二是提高了网站的性能，少了对图片的 HTTP 的请求，网页载入速度将变快；三是增加视觉美观性。

　　既然 border-radius 有这么多好处，我们就从他的语法，属性和属性值等方面来看其如何应用，又是如何制作圆角，还有就是除了制作圆角他还能制作什么？有这么多，那我们就开始吧：

基本语法：

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

取值范围：

　　<length>： 由浮点数字和单位标识符组成的长度值。不可为负值。

简单说明：

　　border-radius 是一种缩写方法。如果“/”前后的值都存在，那么“/”前面的值设置其水平半径，“/”后面值设置其垂直半径。如果没有“/”，则水平和垂直半径相等。另外其四个值是按照top-left、top-right、bottom-right、bottom-left的顺序来设置的其主要会有下面几种情形出现：

　　1、只有一个值，那么 top-left、top-right、bottom-right、bottom-left 四个值相等。

　　2、有两个值，那么 top-left 等于 bottom-right，并且取第一个值；top-right 等于 bottom-left，并且取第二个值

　　3、有三个值，其中第一个值是设置top-left;而第二个值是 top-right 和 bottom-left 并且他们会相等,第三个值是设置 bottom-right。

　　4、有四个值，其中第一个值是设置 top-left 而第二个值是 top-right 第三个值 bottom-right 第四个值是设置 bottom-left。

　　前面，我们主要看了 border-radius 的缩写格式，其实 border-radius 和 border 属性一样，还可以把各个角单独拆分出来，也就是以下四种写法，这里我规纳一点，他们都是先Y轴在X轴，具体看下面：

1 2 3 4

border-top-left-radius: <length>  <length>   //左上角 border-top-right-radius: <length>  <length>  //右上角 border-bottom-right-radius:<length>  <length>  //右下角 border-bottom-left-radius:<length>  <length>   //左下角

　　这里说一下，各角拆分出来取值方式：<length> <length> 中第一个值是圆角水平半径，第二个值是垂直半径,如果第二个值省略，那么其等于第一个值，这时这个角就是一个四分之一的圆角，如果任意一个值为0，那么这个角就不是圆角。

　　border-radius 只有在以下版本的浏览器：Firefox4.0+、Safari5.0+、Google Chrome 10.0+、Opera 10.5+、IE9+ 支持 border-radius 标准语法格式，对于老版的浏览器，border-radius 需要根据不同的浏览器内核添加不同的前缀，比说 Mozilla 内核需要加上“-moz”，而 Webkit 内核需要加上“-webkit”等，那么我为了能兼容各大内核的老版浏览器，我们看看 border-radius 在不同内核浏览器下的书写格式：

　　1、Mozilla(Firefox, Flock等浏览器)

1 2 3 4

-moz-border-radius-topleft: //左上角 -moz-border-radius-topright: //右上角 -moz-border-radius-bottomright: //右下角 -moz-border-radius-bottomleft: //左下角

　　等价于：

1	-moz-border-radius: //简写

　　2、WebKit (Safari, Chrome等浏览器)

1 2 3 4

-webkit-border-top-left-radius:  //左上角 -webkit-border-top-right-radius:  //右上角 -webkit-border-bottom-right-radius:  //右下角 -webkit-border-bottom-left-radius:  // 左下角

   等价于：

1	-webkit-border-radius:  //简写

　　3、Opera浏览器：

1 2 3 4

border-top-left-radius: //左上角 border-top-right-radius: //右上角 border-bottom-right-radius: //右下角 border-bottom-left-radius: //左下角

  等价于：

1	border-radius: //简写

　　4、Trident (IE)

　　IE9 以下版本不支持 border-radius，而且 IE9 没有私有格式，都是用 border-radius，其写法和 Opera 是一样的，这里就不在重复。

　　为了不管是新版还是老版的各种内核浏览器都能支持 border-radius 属性，那么我们在具体应用中时需要把我们的 border-radius 格式改成：

1 2 3

-moz-border-radius: none | <length>{1,4} [/ <length>{1,4} ]? -webkit-border-radius: none | <length>{1,4} [/ <length>{1,4} ]? border-radius: none | <length>{1,4} [/ <length>{1,4} ]?

　　其拆分开来的格式相应需要加上 -moz 和 -webkit，上面的代码其实就等价于下面的代码：

1 2 3 4 5 6 7 8 9 10 11 12

-moz-border-radius-topleft: <length> <length> //左上角 -moz-border-radius-topright: <length> <length> //右上角 -moz-border-radius-bottomright: <length> <length> //右下角 -moz-border-radius-bottomleft: <length> <length> //左下角 -webkit-border-top-left-radius:  <length> <length> //左上角 -webkit-border-top-right-radius:  <length> <length> //右上角 -webkit-border-bottom-right-radius: <length> <length> //右下角 -webkit-border-bottom-left-radius:  <length> <length> // 左下角 border-top-left-radius: <length> <length> //左上角 border-top-right-radius: <length> <length> //右上角 border-bottom-right-radius: <length> <length> //右下角 border-bottom-left-radius: <length> <length> //左下角

　　另外需要特别注意的是，border-radius 一定要放置在 -moz-border-radius 和 -webkit-border-radius 后面，（特别声明：本文中所讲实例都只写了标准语法格式，如果你的版本不是上面所提到的几个版本，如要正常显示效果，请更新浏览器版本，或者在 border-radius 前面加上相应的内核前缀，在实际应用中最好加上各种版本内核浏览器前缀。）

　　我们初步来看一个实例，HTML代码：

1	<div class="demo"></div>

　　为了更好的看出效果，我们给这个demo添加一点样式：

1 2 3 4 5 6

.demo {   width: 150px;   height: 80px;   border: 2px solid #f36;   background: #ccc; }

　　注：如无特殊声明，本文实例所有基本代码格式如上所示，只在该元素上添加border-radius属性设置。

1 2 3

.demo {   border-radius: 10p

上一篇：CSS中font-size属性及其em值的使用
下一篇：css3的Regions扩展详解［重点］