前缀对应浏览器
|
前缀 |
浏览器 |
|
-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这样的固定值还是有差别的，没研究百分比以什么为参考，所以现在不知道怎样通过百分比设置一个左半圆。
【update20170508】
对此的解释是，为一个元素的border-radius定义的百分比值，参照物是这个元素自身的尺寸。
也就是说，假如这个元素宽是60px，高是40px（border-box的尺寸），那么border-radius:50%的结果等同于border-radius:30px/20px;。
Percentages for the horizontal axis refer to the width of the box, percentages for the vertical axis refer to the height of the box.
水平方向的参考的是width，垂直方向参考的是高度。
参考：
https://css-tricks.com/almanac/properties/b/border-radius/
https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius?v=example