分類: 開發工具
CSS 圓角產生器
逐角調整圓角，即時預覽
每個角一個滑桿，隨手複製 border-radius 宣告。開啟橢圓圓角即可使用產生有機造型的斜線寫法。
輸出
border-radius: 12px;
預覽是真正套用產生值的元素，所以看到的就是瀏覽器畫出來的樣子。
本頁的所有處理都在瀏覽器中完成，不會上傳任何內容。
這個工具能做什麼
border-radius 看起來只是一個數字，直到三個角要各自不同才會發現簡寫容易記錯：四個值從左上開始順時針排列，而斜線寫法中，斜線前是每個角的水平半徑，斜線後是垂直半徑。正是第二種寫法能畫出柔和、不對稱、看起來有機而非圓角方塊的輪廓。這裡每個角都有滑桿，預覽是真正套用該值的元素而不是圖片，輸出也像人手寫一樣做了合併：四角相同時只輸出一個值，而不是四個。
使用方式
- 選擇單位；需要各角不同就取消連動。
- 拖曳每個角，直到預覽滿意。
- 需要有機造型就開啟橢圓圓角，然後複製宣告。
隱私說明
本工具完全在你的瀏覽器中執行。輸入的內容不會被上傳、儲存或分享，關閉分頁就隨之消失。
常見問題
- 值裡的斜線是什麼意思？
- 斜線前是每個角的水平半徑，斜線後是垂直半徑。兩側取值不同就會得到橢圓弧，而不是四分之一圓。
- 該用百分比還是像素？
- 像素在任何尺寸下都保持相同弧度，按鈕與卡片通常需要這種效果。百分比會隨元素縮放，正方形設 50% 就變成圓形。
- 為什麼輸出不到四個值？
- CSS 會合併重複的角，本工具也一樣：四角相同是一個值，對角相同是兩個值。結果完全一致，只是寫得更短。