首页 > 技术文章 > CSS3 border-radius 圆角属性

chiuzq 2017-01-03 14:28 原文

使用 CSS3 border-radius 属性,你可以给任何元素制作 "圆角"。

浏览器支持

表格中的数字表示支持该属性的第一个浏览器的版本号。

-webkit- 或 -moz- 前面的数字表示支持该前缀的第一个版本。

ie 9+

谷歌 4.0 -webkit-

火狐 3.0 -moz-

Safari 3.1 -webkit-

Opera 10.5+

 

CSS3 border-radius

可以指定4周每个需要的圆角, 位置从左到右为(上到下): 左-》右-》右-》左即:

border-top-left-radius     定义了左上角的弧度
border-top-right-radius     定义了右上角的弧度
border-bottom-right-radius     定义了右下角的弧度
border-bottom-left-radius     定义了左下角的弧度

如果4个角都要加圆角我们可以这样写1个而不用写4个:如果不需要圆角的写0就可以了, 用起来很方便

#div_radius{

border-radius: 15px;
}

 

推荐阅读