圓角產生器

運作方式

border-radius 很簡單，直到您想要三個角圓、一個角方，這時每個人都得去查四個值的順序。

順序，一次記住

左上、右上、右下、左下，從左上角起順時針。margin、padding 與 border 的簡寫也適用同樣從左上角起順時針的順序，值得一次記起來。

像素或百分比

不論元素大小，像素都會給出相同的弧度。百分比相對於元素本身的寬度與高度，因此弧度會隨之縮放，而在正方形上設定 50% 的圓角會得到正圓，這是製作圓形頭像的標準技巧。

膠囊形狀

大於元素高度一半的圓角半徑會被限制為剛好一半，這就是為什麼 border-radius: 999px 不論高度多少，都能穩定產生膠囊形。這比計算正確的值更可靠，因為內容改變時它仍然有效。

巢狀元素的圓角看起來不對時

圓角方塊內的另一個圓角方塊，其內層的圓角半徑需要更小，減去兩者之間的內距，否則弧線不會同心。這是一個小細節，卻能讓卡片看起來做工到位。