重點摘要
- 01三種模式 — 統一、個別角落和橢圓形 — 涵蓋從簡單圓角按鈕到有機斑點形狀的所有情況。
- 02支援 px、%、rem 單位，每個單位有不同的縮放行為。
- 03橢圓形模式為每個角落公開水平和垂直半徑，用於 CSS 完整的邊框圓角語法。
- 04即時預覽使用實際的 CSS 屬性，所以您看到的內容正是瀏覽器將呈現的內容。
從簡單圓角到有機斑點形狀
四角邊框圓角數值很容易從記憶中輸入 — border-radius: 8px。但一旦您需要不同角落的不同半徑，或者您想要 CSS 橢圓語法的有機形狀，縮寫會迅速變得晦澀。完整形式是 top-left-x top-right-x bottom-right-x bottom-left-x / top-left-y top-right-y bottom-right-y bottom-left-y — 八個特定順序的值。
Handytool 的邊框圓角產生器可讓您在任何模式下為每個角落拖曳滑塊，並看到形狀即時更新。在 px、% 和 rem 之間切換而無需重新計算，完成後複製正確的縮寫或長格式 CSS 宣告。
如何設計邊框圓角
- 01
選擇模式
統一模式對所有四個角落套用一個半徑。個別角落模式獨立控制每個角落。橢圓形模式為每個角落新增單獨的水平和垂直半徑。
- 02
選擇單位
選擇 px 表示絕對大小，% 表示與元素尺寸成比例的值，或 rem 表示與根字體大小相關的大小。
- 03
拖曳滑塊
調整半徑值並觀看預覽元素即時更新。對於個別角落模式，獨立拖曳每個角落的滑塊。
- 04
預覽形狀
預覽方框套用實際的 CSS 邊框圓角屬性，所以您看到的形狀是瀏覽器將呈現的形狀。
- 05
複製 CSS
點擊 [複製] 取得邊框圓角宣告，並將其貼到您的樣式表中。
常見形狀及各模式的使用時機
- 01藥丸按鈕：統一 % 模式，設定為 50% — 無論按鈕寬度如何都始終是藥丸形
- 02具有細微圓角的卡片：統一 px 模式，8–16px — 最常見的 UI 模式
- 03非對稱標籤或標籤：個別角落模式，一側銳角，另一側圓角
- 04頭像圓形：統一 % 模式，50% — 隨著影像容器縮放
- 05有機斑點形狀：橢圓形模式，每個角落具有不同的 X/Y 值
即時預覽，無需上傳
邊框圓角產生器完全是用戶端的。滑塊、模式切換和單位變更都立即更新預覽，無需伺服器往返。沒有帳戶，沒有速率限制。
該工具可在所有現代瀏覽器上運作。邊框圓角屬性 — 包括橢圓形 X/Y 語法 — 在 Safari、Firefox、Edge 和 Chrome 的每個長期維護版本中都受支援，所以輸出可以安全使用，無需供應商前綴或備用方案。
邊框圓角產生器常見問題
px 和 % 對邊框圓角有什麼區別？
像素半徑是絕對的 — 16px 永遠是 16px。百分比半徑與元素的尺寸相關，所以 50% 在正方形方框上建立完美圓形，在矩形上建立橢圓。
何時應該使用橢圓形模式？
當您想要一個角落在一個軸上凸起時使用橢圓形模式 — 用於水平藥丸、葉片形狀或有機斑點。CSS 將其表示為邊框圓角縮寫中的 X-radii / Y-radii。
為什麼我的百分比半徑在非正方形方框上看起來不對？
水平百分比與元素的寬度相關；垂直百分比與其高度相關。在寬而矮的元素上，角落會延伸為橢圓而非圓形弧。
輸出在每個瀏覽器中都能運作嗎？
是的 — 邊框圓角包括橢圓形語法在所有現代瀏覽器中都受支援：Safari、Firefox、Edge 和 Chrome 的所有長期維護版本。無需供應商前綴。
我如何用邊框圓角建立完美圓形？
在正方形元素的百分比模式中將所有角落設定為 50%。該元素還需要相等的寬度和高度 — 如果大小是動態的，請使用 aspect-ratio: 1 / 1。