码迷,mamicode.com
首页 > Web开发 > 详细

css3实现边框圆角样式

时间:2016-08-08 19:17:24      阅读:160      评论:0      收藏:0      [点我收藏+]

标签:

  基本语法:

 border-radius: 5px;

 

兼容大多数浏览器:

/*兼容Mozilla(Firefox, Flock等浏览器)*/

-moz-border-radius-topleft: 5px;
-moz-border-radius-topright: 5px;
-moz-border-radius-bottomright: 5px;
-moz-border-radius-bottomleft: 5px;

/*兼容WebKit (Safari, Chrome等浏览器)*/
-webkit-border-top-left-radius: 5px;
-webkit-border-top-right-radius: 5px;
-webkit-border-bottom-right-radius: 5px;
-webkit-border-bottom-left-radius: 5px;

/*兼容Opera浏览器*/
border-top-left-radius: 5px;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
border-bottom-left-radius: 5px;

 

关于IE:

IE9 以下版本不支持 border-radius,而且 IE9 没有私有格式,都是用 border-radius,其写法和 Opera 是一样的

 

参考文章:

css3 boder-radius实现边框圆角(http://www.studyofnet.com/news/276.html)

css3实现边框圆角样式

标签:

原文地址:http://www.cnblogs.com/miaosha5s/p/5750521.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!