CSS 圓角產生器

功能簡介

CSS 圓角產生器讓你直觀地調整圓角，並複製最短的 CSS。可以給四個角設定同一個半徑，也可以逐一設定；開啟橢圓圓角後，每個角都有獨立的水平和垂直半徑，拖動時預覽即時變化。支援 px、%、rem 和 em，也可以貼上既有的 border-radius 值繼續編輯。所有操作都在瀏覽器中完成。

使用方法

1. 從某個預設開始，或沿用範例形狀。
2. 選擇「單位」。切換單位會換算目前數值（rem 和 em 以 16px 計算，% 相對於預覽方塊）。
3. 開啟「四個角相同」只用一個滑桿；關閉後可以分別設定「左上」「右上」「右下」「左下」。
4. 開啟「橢圓圓角」後，每個角都有「水平」和「垂直」兩個滑桿。
5. 用「寬度」「高度」調整預覽大小，然後從「CSS」卡片複製程式碼。需要四條獨立屬性時開啟完整屬性輸出。

範例

.avatar { border-radius: 50%; }
.tab    { border-radius: 12px 12px 0 0; }
.blob   { border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%; }

小知識

• 最短寫法。 輸出會合併相同的值：四個角相同時只寫一個值，所有角都是圓弧時省略斜線部分。
• 百分比跟隨盒子尺寸。 水平百分比相對於元素寬度，垂直百分比相對於高度，所以長方形上的 50% 是橢圓而不是圓。
• 放不下的半徑 會被瀏覽器一起等比縮小，所以很大的 px 值能得到乾淨的膠囊形。
• 子元素與溢出。 圓角會裁切背景和邊框，但不會裁切子元素內容；要裁切盒子裡的圖片，加上 overflow: hidden。