前缀对应浏览器
|
前缀 |
浏览器 |
|
-webkit |
chrome和safari |
|
-moz |
firefox |
|
-ms |
IE |
|
-o |
opera |
border-radius：
<style type="text/css">
div.circle{
height:100px;/*与width设置一致*/
100px;
background:#9da;
border-radius:50px;/*四个圆角值都设置为宽度或高度值的一半*/
}
div.same{
height:100px;
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