W3C中文教程
全球最大最新的中文 Web 技术教程
HTML CSS SQL PHP COLORS MYSQL BOOTSTRAP
 

CSS3 圆角



CSS3 圆角

使用 CSS3 border-radius 属性, 我们可以给任何的元素添加 "圆角" 样式。


浏览器支持

下表中的数字为指定第一个完全支持该属性的浏览器版本。

后边跟 -webkit-、-moz- 或 -o- 的数字指定了需加上前缀才能支持属性的第一个版本。

属性
border-radius 5.0
4.0 -webkit-
12.0 9.0 4.0
3.0 -moz-
5.0
3.1 -webkit-
10.5

CSS3 border-radius 属性

使用CSS3,你可以使用 border-radius 属性给任何元素添加 "圆角" 样式。

以下为三个实例:

1、具有指定背景颜色的圆角:

Rounded corners!

2、具有边框元素的圆角:

Rounded corners!

3、具有背景图像的圆角:

Rounded corners!

代码如下:

Example

#rcorners1 {
    border-radius: 25px;
    background: #73AD21;
    padding: 20px;
    width: 200px;
    height: 150px;
}

#rcorners2 {
    border-radius: 25px;
    border: 2px solid #73AD21;
    padding: 20px;
    width: 200px;
    height: 150px;
}

#rcorners3 {
    border-radius: 25px;
    background: url(paper.gif);
    background-position: left top;
    background-repeat: repeat;
    padding: 20px;
    width: 200px;
    height: 150px;
}
尝试一下 »
Note 提示: border-radius 属性实际上就是 border-top-left-radiusborder-top-right-radiusborder-bottom-right-radiusborder-bottom-left-radius 属性的简写。

CSS3 border-radius - 指定角

如果你使用 border-radius 属性仅指定一个值,则此半径将应用于所有4个角。

但是,你可以按照自己的愿意分别指定每个角的值。以下是相应的规则:

  • 四个值: 第一个值适用于左上角,第二个值适用于右上角,第二个值适用于右下角,第四值适用于左下角
  • 三个值: 第一个值适用于左上角,第二个值适用于右上角和左下角,右下角值为第三
  • 两个值: 第一个值适用于左上角和右下角,第二个值适用于右上角和左下角
  • 一个值: 所有四个角均圆

以下为三个实例:

1、四个值 - border-radius: 15px 50px 30px 5px:

2、三个值 - border-radius: 15px 50px 30px:

3、两个值 - border-radius: 15px 50px:

代码如下:

Example

#rcorners4 {
    border-radius: 15px 50px 30px 5px;
    background: #73AD21;
    padding: 20px;
    width: 200px;
    height: 150px;
}

#rcorners5 {
    border-radius: 15px 50px 30px;
    background: #73AD21;
    padding: 20px;
    width: 200px;
    height: 150px;
}

#rcorners6 {
    border-radius: 15px 50px;
    background: #73AD21;
    padding: 20px;
    width: 200px;
    height: 150px;
}
尝试一下 »

你还可以创建椭圆角:

Example

#rcorners7 {
    border-radius: 50px/15px;
    background: #73AD21;
    padding: 20px;
    width: 200px;
    height: 150px;
}

#rcorners8 {
    border-radius: 15px/50px;
    background: #73AD21;
    padding: 20px;
    width: 200px;
    height: 150px;
}

#rcorners9 {
    border-radius: 50%;
    background: #73AD21;
    padding: 20px;
    width: 200px;
    height: 150px;
}
尝试一下 »

CSS3 圆角属性

属性 描述
border-radius 用于设置所有四个边界 border-*-*-radius 属性
border-top-left-radius 定义左上角边框的形状
border-top-right-radius 定义右上角边框的形状
border-bottom-right-radius 定义右下角边框的形状
border-bottom-left-radius 定义左下角边框的形状