CSS3:border-radius

定义和用法

border-radius 属性是一个简写属性，用于设置四个 border-*-radius 属性。如下所示：

border-top-left-radius
border-top-right-radius
border-bottom-right-radius
border-bottom-left-radius

如果我们传给它四个值， 这四个值就会被分别 从左上角开始以顺时针顺序应用到元素的各个拐角；

如果只提供了三个值， 则意味着第四个值与第二值相同； 

如果只有两个值， 则意味着第三个值与第一个相同；

我们甚至可以为所有四个角提供完全不同的水平和垂直半径， 方法是在斜杠前指定 1~4 个值， 在斜杠后指定另外 1~4 个值；举例来说， 当 border-radius 的值为10px / 5px 20px 时， 其效果相当于 10px 10px 10px 10px / 5px 20px 5px 20px。

语法

border-radius: 1-4 length|% / 1-4 length|%;

注释：按此顺序设置每个 radius 的四个值,斜杠/左侧表示指定圆角的水平半径，斜杠/右侧表示指定圆角的垂直半径;

若斜杠/前后的两个值一致时（即水平半径和垂直半径相等时，此时画的圆角是正圆而不是椭圆），斜杠/符号可以省略，

如 border-radius: 2em 2em 2em 2em / 2em 2em 2em 2em; 

等价于border-radius: 2em / 2em ;

等价于border-radius: 2em ;

例子 1

border-radius:2em;

等价于：

border-top-left-radius:2em;
border-top-right-radius:2em;
border-bottom-right-radius:2em;
border-bottom-left-radius:2em;

(左上、右上、右下、左下四个圆角的radius都是只有一个值2em,表示的是正圆)

例子 2

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

等价于：

border-radius: 2em 1em 4em 1em/ 0.5em 3em 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-top-left-radius:2em 0.5em表示左上角的圆角是1/4个椭圆，椭圆的水平半径为2em,垂直半径为0.5em)

如何使用border-radius属性

下面是border-radius属性最基本的使用方法。

.round {
	border-radius: 5px; /* 所有角都使用半径为5px的圆角，此属性为CSS3标准属性 */
	-moz-border-radius: 5px; /* Mozilla浏览器的私有属性 */
	-webkit-border-radius: 5px; /* Webkit浏览器的私有属性 */
	border-radius: 5px 4px 3px 2px; /* 四个半径值分别是左上角、右上角、右下角和左下角 */
}

关于在IE里怎么实现圆角，可以看《Excellent Article Which Included Ways to Achieve Rounded Corners in IE》这篇文章。

1.用border-radius画圆

实心圆

如图，是用border-radius属性画出来的一个完美的实心圆。画实心圆的方法是高度和宽度相等，并且把border的宽度设为高度和宽度的一半。代码如下。

#circle {
	width: 200px;
	height: 200px;
	background-color: #a72525;
	-webkit-border-radius: 100px;
}

空心圆

通过border-radius属性画空心圆和画实心圆的方法差不多，只是border的宽度只能小于高度和宽度的一半。代码如下。

#circle {
	width: 200px;
	height: 200px;
	background-color: #efefef; /* Can be set to transparent */
      	border: 3px #a72525 solid;
	-webkit-border-radius: 100px;
}

虚线圆

#circle {
	width: 200px;
	height: 200px;
	background-color: #efefef; /* Can be set to transparent */
      	border: 3px #a72525 dashed;
	-webkit-border-radius: 100px 100px 100px 100px;
}

2.半圆和四分之一圆

半圆

以本例来讲，半圆的画法是把宽度设为高度的一半，并且也只设置左上角和左下角的半径。代码如下。

#quartercircle {
	width: 200px;
	height: 200px;
	background-color: #a72525;
	-webkit-border-radius: 100px 0 0 100px;
}

四分之一圆

四分之一圆的实现方法是把高度和宽度设置为相等，只设置一个圆角，其半径等于高度或宽度。本例代码如下。

#quartercircle {
	width: 200px;
	height: 200px;
	background-color: #a72525;
	-webkit-border-radius: 200px 0 0 0;
}

更多玩法

看了这么多实例后，你完全可以自己创造更多玩法，如：

虚线的半圆和四分之一圆。

配合position属性做一个月亮。

配合position、RGBa和z-index这些属性做一个本文开头的色彩维恩图。

转自：http://www.xincss.com/?p=221