微信訂閱號：Rabbit_svip

這次的筆記，需要有CSS圓角基礎(border-radius)才能看得懂。

“當任意兩個相鄰圓角的半徑之和超過 border box 的尺寸時，用戶代理必須按比例減小各個邊框半徑所使用的值，直到它們不會相互重疊位置”

——CSS背景與邊框（第三版）

【圓】

在給任何正方形元素設置一個足夠大的 border-radius ，就可以把它變成一個圓形。

例如

background: #ff6600;
width: 200px;
height: 200px;
border-radius: 100px; /* >= 正方形邊長的一半 */

image.png

【橢圓】

要理解橢圓，首先要直到 border-radius 另一個鮮為人知的屬性：它可以單獨指定水平和垂直半徑，只要用斜杠（/）分隔這兩個值即可。

例如

border-radius: 100px / 60px;

如果當元素的長和寬不一樣時，設置圓角半徑分別是元素長和寬的一半。
例如

width: 200px;
height: 150px;
border-radius: 100px / 75px;
background: #ff6600;

image.png

但是上面的代碼有一個很大的缺陷：只要元素的尺寸發(fā)生變化， border-radius 的值就得跟著改。如果只是用px來設置 border-radius 的話，是無法靈活變化的。

這時可以用百分比（%）代替 px。

width: 200px;
height: 150px;
border-radius: 50% / 50%;
background: #ff6600;

由于 border-radius 設置的兩個值都相同，所以可以進一步簡化

width: 200px;
height: 150px;
border-radius: 50%;
background: #ff6600;

最終得到的效果也是一樣的。

【半圓 / 半橢圓】

width: 200px;
height: 200px;
border-radius: 50% / 100% 100% 0 0;
background: #ff6600;

image

半圓和半橢圓的原理是一樣的。

需要調節(jié)橢圓的方向，只要稍微調整一下border-radius的值就行了。

【1/4圓】

width: 200px;
height: 200px;
border-radius: 100% 0 0 0;
background-color: #ff6600;

image