当前位置:首页 > 教程中心 > DIV+CSS教程 > HTML5+CSS3

CSS3圆角属性Border-radius

所属栏目:HTML5+CSS3 时间:2014-05-24 来源:网络 作者:不详 点击:

border-radius,是CSS3中制作圆角的属性。

在CSS2中,想要实现圆角效果是非常复杂,而利用CSS3则很简单。

虽然CSS3需要高版本浏览器才支持,但现在的高版本IE很普及了,谷歌,火狐等浏览器最支持,完全可以忽略这个问题。


语法
border-radius : none | <length>{1,4} [ / <length>{1,4} ]?
相关属性
border-radius   //四个角    如:border-radius:10px
border-top-right-radius    //右上角    如:border-radius:10px
border-bottom-right-radius    //右下角    如:border-radius:10px
border-bottom-left-radius     //左下角    如:border-radius:10px
border-top-left-radius      //左上角    如:border-radius:10px
取值

<length>:由浮点数字和单位标识符组成的长度值。不可为负值。

border-top-left-radius:由浮点数字和单位标识符组成的长度值。不可为负值。


说明

第一个值是水平半径。

如果第二个值省略,则它等于第一个值,这时这个角就是一个四分之一圆角。

如果任意一个值为0,则这个角是矩形,不会是圆的。

值不允许是负值。

引擎类型GeckoWebkitPresto
Border-radius-moz-border-radius-webkit-border-radius
border-bottom-left-radius-moz-border-radius-bottomleft-webkit-border-bottom-left-radius
border-bottom-right-radius-moz-border-radius-bottomright-webkit-border-bottom-right-radius
border-top-left-radius-moz-border-radius-topleft-webkit-border-top-left-radius
border-top-right-radius-moz-border-radius-topright-webkit-border-top-right-radius

兼容性:


类型IEInternet ExplorerFirefoxFirefoxChromeChromeOperaOperaSafariSafari
版本(×)IE6(×)Firefox 2.0(√)Chrome 1.0.x(×)Opera 9.64(√)Safari 3.1
(×)IE7(√)Firefox 3.0(√)Chrome 2.0.x

(×)IE8(√)Firefox 3.5









示例


示例代码
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Border-radius</title>
</head>
<body>
<div style="border-width: 1px;border-style: solid;-moz-border-radius: 11px;-khtml-border-radius: 11px;-webkit-border-radius: 11px;border-radius: 11px;padding:5px;">一流资源网:在Firefox和Safari 3的浏览器里能看到圆角效果</div>
</body>
</html>

可以复制以上代码,在以下工具中运行查看效果:

在线运行代码:http://tool.16css.com/runcode/


请站长喝杯咖啡?

站长一直坚持白天工作、晚上熬夜更新素材,付出了巨大的精力和时间,其中的辛酸难以言述。

坚持免积分、免登录、无任何限制下载!如果本站素材对你有用,不妨考虑请站长喝杯咖啡鼓励一下!

你应该也喜欢这些吧

共有 0 条评论

给个评价吧

验证码: