CSS3中的圆角效果

参考：CSS3 Rounded Corners

使用CSS3中的 border-radius 属性，可以在任何元素上实现“圆角效果”。

---

浏览器兼容

Chrome	IE	Firefox	Safari	Opera
5.0+	9.0+	4.0+	5.0+	10.5+

CSS3 border-radius 属性

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

下面是几个圆角效果示例：

圆角一

圆角二

圆角三

HTML代码

<p class="corner corner-1">圆角一</p>
<p class="corner corner-2">圆角二</p>
<p class="corner corner-3">圆角三</p>

CSS代码

.corner {
    border-radius: 20px;
    width: 160px;
    height: 80px;
    text-align: center !important;
}
.corner-1 {        
    background: green !important;
    color: white !important;
}
.corner-2 {
    border: 1px green solid;
}
.corner-3 {
    background: url(paper.gif);
    background-repeat: repeat;
}

border-radius 属性实际上是 border-top-left-radius 、border-top-right-radius 、border-bottom-right-radius 及 border-bottom-left-radius 这几个属性的缩写属性。

设置每个角

如果我们只给 border-radius 属性设置一个值，则圆角效果会应用到全部的四个角上。然而如果我们需要，也可以分开指定每个角的圆角属性。

下面是规则：

• 四个值：四个值分别应用到左上、右上、右下、左下（顺时针方向）四个角。
• 三个值：第一个值应用到左上角，第二个值应用到右上角和左下角，第三个值应用到右下角。
• 两个值：第一个值应用到左上角和右下角，第二个值应用到右上角和左下角。
• 一个值：四个角全部应用该值。

下面是几个示例：

四个值15px 40px 25px 5px

三个值15px 40px 25px

两个值15px 40px

HTML代码

<p class="corner-x corner-x1">四个值15px 40px 25px 5px</p>
<p class="corner-x corner-x2">三个值15px 40px 25px</p>
<p class="corner-x corner-x3">两个值15px 40px</p>

CSS代码

.corner-x {
    width: 240px;
    height: 80px;
    background: green !important;
    text-align: center !important;
    color: white !important;
}
.corner-x1 {
    border-radius: 15px 40px 25px 5px
}
.corner-x2 {
    border-radius: 15px 40px 25px
}
.corner-x3 {
    border-radius: 15px 40px
}

CSS3 圆角属性

属性	描述
border-radius	四个border-*-*-radius属性的缩写属性
border-top-left-radius	定义左上角边框形状
border-top-right-radius	定义右上角边框形状
border-bottom-right-radius	定义左下角边框形状
border-bottom-left-radius	定义右下角边框形状