CSS3新增样式大解析：[1]borderRadius的使用

CSS3新增样式大解析：[1]borderRadius的使用

borderRadius，在CSS当中正确的写法应是border-radius，标题因为字数限制就连在一块了。在系列经验当中，以后标题均用这种写法。

border-radius是CSS3中新增的属性，用于制作盒子的圆角效果；而在此前，制作圆角效果往往需要通过背景图片来实现，下面就来教你怎么使用这一新属性吧。

下图是我制作的示例原型，为方便演示，我将样式写在了头部信息当中：

顾名思义，radius中译为‘半径、园径’。

首先我们来看看盒子的某一个角的圆角效果，盒子的角分为左上、右上、左下、右下四个，相应的各角都有各自设置圆角的方法。参看下图，代码分别对应了左上角 右上角 左下角 右下角四个角的圆角，以border-top-left-radius为例后面跟随像素单位的长度。【请注意：不可写成border-left-top-radius，其它同】

border-top-left-radius:20px与border-top-left-radius：20px 60px;

当border-top-left-radius其实是有可以去两个单位长度的数值的，第一个长度表示的是圆角的水平半径，第二个长度值则表示圆角的垂直半径。

如果border-top-left-radius取值只有一个的话，此时默认的设置为水平半径=水质半径（即半圆）

通常情况下，我们比较少单独的为四个角设置不同的圆角半径，更多的我们是使用四个角效果统一的圆角半径写法：border-radius。

当然border-radius也可以为各角设置不同的半径，下面就来看看。

border-radius取一个值。

下图示例，采用了border-radius：20px，为盒子的四个角设置了同为20px半径的圆角，这种效果我们会看起来很舒服，很协调。

border-radius取两个值。

border-radius：20px 40px;

同盒子的margin/padding属性一样，两个值意味着上下是一样的，左右是一样的，当然圆角没有上下之分，它是以左上角为起始点的。这就意味着盒子的左上-右下圆角是相同的，右上-左下的圆角是一样的。

border-radius取3个值。

border-radius：20px 40px 60px；

依旧同margin/padding，他意味着左上圆角半径为20px,右上和左下均为40px，右下为60px，看下图。

border-radius取4个值。

border-radius：10px 30px 60px 90px；

这种情况相当于分别给盒子的四个设置了圆角半径，顺序依次为左上-右上-右下-左下，效果如图：

前面我们说到了border-radius分别取1-4个值的情况，在这种情况下默认的是圆角的水平和垂直半径相等。

对于当个的圆角设置圆角半径可以这样写：border-top-left-radius：20px 40px;那对于border-radius如果要设置垂直半径应当怎么写呢？请看下面：

border-radius：20px/40px;

其中反斜杠前面的就是水平半径，后面的就是垂直半径了。

当然你也可以这样写：

border-radius：10px 30px 60px 90px/90px 60px 30px 10px

这样可以分别设置每个角的垂直和水平的圆角半径，相信挺容易的吧。

关于兼容的说明：目前大部分主流浏览器都已经支持了这一属性

Firefox4.0+、Safari5.0+、Google Chrome 10.0+、Opera 10.5+、IE9+支持border-radius标准语法格式，但对于老版的浏览器，border-radius需要根据不同的浏览器内核添加不同的前缀，Mozilla内核需要加上“-moz-”，而Webkit内核需要加上“-webkit-“，而Opera的需要加上“-0-”。