利用 border-radius 來畫圓形

還蠻常用到的一個小技巧

示範

只要做出一個正方形，再設定 border-radius 為寬度的一半就能畫出來：

<div class="box">box1</div>

.box {
  width: 100px;
  height: 100px;
  /* 50px 跟 50% 是一樣的 */
  border-radius: 50px;
}

淺談 border-radius 的原理

border-radius 設定的是一個圓的「半徑」，而原理就是「畫一個圓形」來切割出圓角。

所以其實它完整的寫法應該是這樣子：

.box {
  border-radius: 50px/50px
}

代表這個圓的垂直半徑是 50px，水平半徑是 50px：

接著再拿這個圓去切割出圓角：

結果：

備註：為了方便理解，所以這裡先把正方形尺寸設為 150px，所以最後切出來才會不是圓形。

在圓形的情況下是這樣子：

結果：

想了解更多可以參考：了解一下border-radius的实现原理