您的位置：首页 > Web前端 > CSS

CSS3:border-radius

2016-06-03 19:03 591 查看

[title2]
定义和用法[/title2]

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。

[title2]

[/title2]

[title2]
语法[/title2]

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;

[b](左上、右上、右下、左下四个圆角的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)

[/b]

如何使用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;
}