css3 border-radius

前缀对应浏览器

前缀	浏览器
-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