CSS3圆角
CSS3圆角
CSS3 圆角
使用CSS3 border-radius
属性, 你可以让元素圆角显示.
浏览器支持
表中的数字指定完全支持该属性的第一个浏览器版本。
数字后面的 -webkit- 或者 -moz- 使用时需要指定前缀。
属性 | |||||
---|---|---|---|---|---|
border-radius | 5.0 4.0 -webkit- | 9.0 | 4.0 3.0 -moz- | 5.0 3.1 -webkit- | 10.5 |
CSS3 border-radius 属性
在CSS3中,可以使用border-radius
属性,为元素指定圆角显示。
下面有三个例子:
1.具有指定背景色的圆角元素:
圆角!
2.带边框的圆角元素:
圆角!
3.带背景图的圆角元素:
圆角!
代码如下:
#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(static/assets/tutorials/front/css/paper.gif); background-position: left top; background-repeat: repeat; padding: 20px; width: 200px; height: 150px; }
提示:
border-radius
属性实际是border-top-left-radius
,border-top-right-radius
,border-bottom-right-radius
和border-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:
代码如下:
#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; }
你也可以创建椭圆形的圆角
#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` | |
对左上角的边框形状 | |
定义了右上角的边框形状 | |
定义右下角边框的形状。 | |
定义左下角边框的形状 |
本文转自:http://codingdict.com/article/2006 更多css3教程参考:http://codingdict.com/article/2005