為什么在border-radius:50px;中，當(dāng)值大于等于50px時彎曲的半徑效果會跟border-radius:50px;一樣呢？

<!doctype html>

<html>

<head>

<title>border-radius</title>

div.circle{

? ? height:100px;/*與width設(shè)置一致*/

? ? width:100px;

? ? background:#9da;

? ? border-radius:50px;/*四個圓角值都設(shè)置為寬度或高度值的一半*/

? ? }

/*任務(wù)部分*/ ??

div.semi-circle{?

? ? height:100px;

? ? width:50px;

? ? background:#9da;

? ? border-radius:50px 0px 0px 50px;

? ? }

? ?

</style>

</head>

<body>

</div>

<br/>

</div>

</body>

</html>

慕粉1420362554

2016-10-17

源自：十天精通CSS3 2-1

關(guān)注問題我要回答

1429

操作

收起

3 回答

慕粉3791347
2017-03-11

如果兩個邊框值大于或等于半徑且相等，則默認(rèn)為半徑值，如半徑為50px,設(shè)置（80px 0 0 50px）；則將80默認(rèn)為50px,而50px=80-50=30px效果為（50px 0 0 30px），若相差大于半徑，則最大的默認(rèn)為半徑，其他的按比例來顯示

0 回復(fù) 有任何疑惑可以回復(fù)我~

收起回答

#1

愛上慕婉清6262634

按你的辦法測試了一下，實際效果值應(yīng)該是這樣的：假設(shè)div1 寬50 高100;設(shè)置邊框（80px 0 0 50px）；顯示效果應(yīng)該與div2 寬80 高160 邊框（80px 0 0 50px）效果相同 div1展示效果相當(dāng)于div2保持寬高比縮小至于div1大小相同時的樣子