圓角產生器
拖曳滑桿分別調整四個角的圓角,開啟橢圓模式還能捏出流動的異形(“blob”)形狀,CSS 程式碼即時產生,隨時複製。
所有角
右上
右下
左下
每個圓角形狀都在你的瀏覽器裏繪製,這裡設定的內容不會上傳到 BroBroGo。
常見問題
四個角和 px、% 是如何對應的?
四個滑桿按順時針方向分別對應左上、右上、右下、左下四個角。用 px 時圓角是固定的像素大小;用 % 時則相對於元素本身——橫向百分比按寬度計算,縱向百分比按高度計算,所以正方形設成 50% 就變成了圓。
橢圓模式是做甚麼的?
關閉時每個角都是單一半徑的四分之一圓。打開後,每個角可以分別設定橫向和縱向兩個半徑,這正是做出柔和、流動的異形(“blob”)形狀的關鍵。工具會自動寫成帶斜線的兩組數值,四個角都變回正圓時又會收回最短寫法。
如何做出正圓或膠囊形狀?
把四個角連動,切換到 %,設成 50%——正方形就變成正圓。想做膠囊按鈕就改用 px,把某個角拖曳到超過按鈕高度的一半,不論多寬兩端都會是完整的圓。點按一下「正圓」預設就能得到第一種效果的起點。