一篇文章带你了解CSS3圆角知识（一）
一、浏览器支持
表中的数字指定完全支持该属性的第一个浏览器版本。
数字后面的 －webkit－ 或者 －moz－ 使用时需要指定前缀。
属性ChromeFirefoxSafariOperaIEborder－radius5．0 4．0 －webkit－9．04．0 3．0 －moz－5．0 3．1 －webkit－10．5
二、border－radius 属性
1． 创建具有背景图的圆角
CSS3中，可以使用border－radius属性，为元素指定圆角显示。
代码如下：
＜！DOCTYPE html＞ ＜html＞ ＜meta charset＝＂UTF－8＂＞ ＜title＞项目＜／title＞
＜head＞ ＜style＞ ＃rcorners1 ｛
border－radius： 25px； background： ＃f00；
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（img／fy＿indexBg．jpg）； background－position： left top；
background－repeat： repeat； padding： 20px；
width： 200px； height： 150px；
｝＜／style＞ ＜／head＞
＜body＞
＜p＞The border－radius
property allows you to add rounded corners to elements．＜／p＞
＜p＞Rounded corners for an element with a specified background
color：＜／p＞ ＜！－－1．具有指定背景色的圆角元素－－＞ ＜p id＝＂rcorners1＂＞Rounded
corners！＜／p＞ ＜p＞Rounded corners for an element with a
border：＜／p＞ ＜！－－2．带边框的圆角元素：－－＞ ＜p id＝＂rcorners2＂＞Rounded
corners！＜／p＞ ＜！－－3．带背景图的圆角元素－－＞ ＜p＞Rounded corners for an
element with a background image：＜／p＞ ＜p id＝＂rcorners3＂＞Rounded
corners！＜／p＞
＜／body＞
＜／html＞
