開發者免費本機執行
CSS 邊框半徑產生器
直觀地設計 CSS 邊框半徑——統一、單角和橢圓——帶即時預覽。
預覽
CSS
border-radius: 16px;模式
單位
按角模式獨立控制每個角；橢圓分離水平和垂直半徑。
關於CSS 邊框半徑產生器
Handytool 的邊框半徑產生器讓您用滑桿而不是猜測來塑造元素的角。使用統一模式實現簡單的圓形框，使用單角模式構建不對稱的藥丸形狀，或使用橢圓模式為每個角分割水平和垂直半徑以實現有機斑點形狀。預覽即時更新，CSS 宣告一鍵即得。
CSS 邊框半徑產生器功能
- 01
統一和單角模式
統一模式對每個角套用一個半徑。單角模式獨立控制左上、右上、右下和左下——藥丸、葉子和不對稱標籤形狀只需點擊幾下。
- 02
橢圓（X/Y）角
切換橢圓模式為每個角指定水平和垂直半徑——CSS 支援的語法，用於有機的斑點形狀。
- 03
三種單位
在像素、百分比和 rem 之間切換。百分比值建立真正的橢圓，隨方框縮放；rem 值追蹤根字型大小以實現可存取性。
CSS 邊框半徑產生器常見問題
- 像素和百分比有什麼區別？
- 像素半徑是絕對的——16px 角總是 16px。百分比半徑相對於元素的寬度和高度，所以 50% 在方形框上建立完美圓形，在矩形上建立橢圓。
- 何時應使用橢圓模式？
- 當您想要在一個軸上凸起更多的角時使用橢圓模式——例如水平藥丸（50%/100%）或葉形斑點形狀。CSS 將其表示為 `左上-x 右上-x ... / 左上-y 右上-y ...`。
- 為什麼我的百分比半徑在非方形框上看起來不對？
- 邊框半徑上的百分比相對於對應的邊：水平百分比相對於寬度，垂直相對於高度。在寬矮的框上，這表示角拉伸成橢圓而不是完美圓弧。
- 輸出在每個瀏覽器中都有效嗎？
- 是的——邊框半徑和橢圓語法在包括 Safari、Firefox、Edge 和 Chrome 的所有常青版本的每個現代瀏覽器中都受支援。