前缀对应浏览器
|
前缀 |
浏览器 |
|
-webkit |
chrome和safari |
|
-moz |
firefox |
|
-ms |
IE |
|
-o |
opera |
border-radius：
<style type="text/css"> div.circle{ height:100px;/*与width设置一致*/ width:100px; background:#9da; border-radius:50px;/*四个圆角值都设置为宽度或高度值的一半*/ } div.same{ height:100px; width:50px; background:#9da; } .semi-circle{ border-radius:50px 0 0 50px; } .test{ border-radius: 50% 0 0 50%; } </style> <body> <div class="circle"> </div> <br/> <div class="same semi-circle "> </div> <br/> <div class="same test"> </div> </body>
可见设置50%和设置50px这样的固定值还是有差别的，没研究百分比以什么为参考，所以现在不知道怎样通过百分比设置一个左半圆。
参考：
https://css-tricks.com/almanac/properties/b/border-radius/
原文：http://www.cnblogs.com/starof/p/4533819.html