#41 用 CSS border-radius 畫圓角與圓圓的形狀：圓、圓柱、橢圓、蛋型、鐘型、葉子 (眼睛)、花瓣 (水滴/心形)、牛角 (彎月)

⚠️ 本篇文章已搬遷至 css.im1010ioio.dev，請至新站閱讀完整版。

---

在上篇文章中，我們用簡單的圓形加上模糊效果繪製了不規則的漸層，這篇我們來探討如何繪製各種形狀，其實使用 CSS 邊框 (border) 中的「邊框圓角 (border-radius) 」可以繪製出許多形狀。（突然覺得應該先寫這篇）

border-radius 是 CSS 中用來讓元素的邊角變圓的屬性。你可以使用這個屬性來製作圓角到圓形等效果，廣泛應用在按鈕、卡片、圖片等元素的設計中。無論是用在按鈕還是圖片上，它都能讓你的頁面設計更具柔和感。

↓ 今日學習重點 ↓

• 學會 border-radius 的基本用法

• 了解繪製出圓角的原理

---

一、基礎語法

• border-radius 的數值可以是像素 (px)、百分比 (%)，甚至是 em 等單位。

• 數值越大，圓角的弧度越大。

• 當 border-radius 的數值等於元素寬高的一半時，元素會呈現出完美的圓形。

1 個值：單一圓角（⭐️常用）

如果四個角的圓角都一樣，可以只設定一個值…