css3 border-radius

admin發表於2018-07-20
CSSS3

字首對應瀏覽器

字首

瀏覽器

-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 

相關文章