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