任務路徑 / 從輸入到結果
如何塑造 CSS 圓角
- 01
選擇單位
把「單位」設為「像素」或「百分比」——工作區以像素開始。像素在任何元素尺寸下都保持不變；百分比隨元素縮放，這正是實現不對稱有機形狀的關鍵。
- 02
調整四個圓角
移動「左上」「右上」「右下」「左下」四個滑桿——每個都可在所選單位下以 1 為步進取 0 到 100。四個角初始都是 24 px，預覽卡片會隨每次修改重繪。
- 03
連動或取消連動
保持「連動所有圓角」開啟即可同時修改全部圓角；關閉它則可獨立塑造每個角。工作區在開關旁寫明了：連動時，修改一個圓角會同時更新全部四個。
- 04
試用範例形狀
點擊「載入範例」可得到一個不對稱的參考：左上和右下為 64 px，右上和左下為 12 px，且不連動——這正是卡片和頭像上常見的對角葉片形。「重設」恢復統一的 24 px 預設值。
- 05
檢查產生的宣告
輸出始終按順時針列出四個值——左上、右上、右下、左下——貼上後每個角都保持明確。狀態標記顯示「CSS 有效」；任何超出範圍的角都會把它變為「檢查數值」並阻止複製。
- 06
複製或下載 CSS
點擊「複製 CSS」，把 .rounded-card 規則以四值 border-radius 宣告複製下來；或點擊「下載 .css」儲存為 toolars-border-radius.css。同一條宣告對圖片、按鈕、卡片和任何其他元素都適用。