前缀对应浏览器
前缀 | 浏览器 |
-webkit | chrome和safari |
-moz | firefox |
-ms | IE |
-o | opera |
border-radius:
可见设置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/