CSS3 圆角详解(border-radius)
HTML/CSS
2013-12-12
前缀
-moz(例如 -moz-border-radius)用于Firefox-webkit(例如:-webkit-border-radius)用于Safari和Chrome。
支持上、右、下、左
-moz(例如 -moz-border-radius)用于Firefox-webkit(例如:-webkit-border-radius)用于Safari和Chrome。
案例一(有边框):
.radiusTest { padding:10px; width:300px; height:50px; border: 5px solid #B8DBF4; -moz-border-radius: 15px; /* Gecko browsers */ -webkit-border-radius: 15px; /* Webkit browsers */ border-radius:15px; /* W3C syntax */ }效果预览:
案例二(无边框):
.radiusTestTwo { padding:10px; width:300px; height:50px; -moz-border-radius: 15px; /* Gecko browsers */ -webkit-border-radius: 15px; /* Webkit browsers */ border-radius:15px; /* W3C syntax */ }效果预览:
其它(分个设置边框等):
支持上、右、下、左
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;
支持性:
浏览器 | 支持性 |
---|---|
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 | × |
读后有收获可以支付宝请作者喝咖啡
湘ICP备15005320号-1
似懂非懂 Powered by doyo.
网站地图