网站首页学无止境CSS
CSS3 圆角 圆角边框(border-radius)
发布时间:2014-07-11 11:27:40编辑:phpcms阅读(146)
- -moz(例如 -moz-border-radius)用于Firefox
- -webkit(例如:-webkit-border-radius)用于Safari和Chrome。
- #round {
- padding:10px;
- width:300px;
- height:50px;
- border: 5px solid #dedede;
- -moz-border-radius: 15px; /* Gecko browsers */
- -webkit-border-radius: 15px; /* Webkit browsers */
- border-radius:15px; /* W3C syntax */
- }
- #round {
- padding:10px;
- width:300px;
- height:50px;
- background:#FC9;
- -moz-border-radius: 15px;
- -webkit-border-radius: 15px;
- border-radius:15px;
- }
- /* Gecko browsers */
- -moz-border-radius: 5px;
- /* Webkit browsers */
- -webkit-border-radius: 5px;
- /* W3C syntax - likely to be standard so use for future proofing */
- border-radius:10px;
- border-radius:5px 15px 20px 25px;
- /* Gecko browsers */
- -moz-border-radius-topleft: 20px;
- -moz-border-radius-topright: 0;
- -moz-border-radius-bottomleft: 0;
- -moz-border-radius-bottomright: 20px;
- /* Webkit browsers */
- -webkit-border-top-left-radius: 20px;
- -webkit-border-top-right-radius: 0;
- -webkit-border-bottom-left-radius: 0;
- -webkit-border-bottom-right-radius: 20px;
- /* W3C syntax */
- border-top-left-radius: 20px;
- border-top-right-radius: 0;
- border-bottom-right-radius: 0;
- border-bottom-left-radius: 20px;
前缀
例1
效果:
例2:无边框
效果:
书写顺序
其它
支持上、右、下、左
支持拆分书写
支持性
浏览器 | 支持性 |
---|---|
Firefox(2、3+) | √ |
Google Chrome(1.0.154+…) | √ |
Google Chrome(2.0.156+…) | √ |
Safari(3.2.1+ windows) | √ |
Internet Explorer(IE7, IE8) | × |
Opera 9.6 | × |
本文来源地址:http://www.cnblogs.com/rainman/archive/2011/06/21/2085800.html