為什么 在border-radius:50px;中,當值大于等于50px時彎曲的半徑效果會跟border-radius:50px;一樣呢?
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>border-radius</title>
<style type="text/css">
div.circle{
? ? height:100px;/*與width設置一致*/
? ? width:100px;
? ? background:#9da;
? ? border-radius:50px;/*四個圓角值都設置為寬度或高度值的一半*/
? ? }
/*任務部分*/ ??
div.semi-circle{?
? ? height:100px;
? ? width:50px;
? ? background:#9da;
? ? border-radius:50px 0px 0px 50px;
? ? }
? ?
</style>
</head>
<body>
<div class="circle">
</div>
<br/>
<!--任務部分-->
<div class="semi-circle">
</div>
</body>
</html>
2017-03-11
如果兩個邊框值大于或等于半徑且相等,則默認為半徑值,如半徑為50px,設置(80px 0 0 50px);則將80默認為50px,而50px=80-50=30px效果為(50px 0 0 30px),若相差大于半徑,則最大的默認為半徑,其他的按比例來顯示
2016-12-13
我也有這種情況,在設置border-radius大于半徑時,還是一個圓。這應該有問題
2016-10-18
border-radius:50px 0px 0px 50px;中,你將第一個值改成80px;試試看,是不一樣的