調整 CSS 圓角屬性的運作機制
CSS 的 border-radius 屬性用於設定網頁元素外框的圓角程度。本工具提供直覺的介面，讓設計者調整矩形四個角的弧度，並即時產生對應的 CSS 程式碼。
在設定上，四個角的滑桿依順時針方向排列，分別對應「左上」、「右上」、「右下」與「左下」四個角。當啟用「四角連動」時，介面會簡化為單一滑桿「所有角」進行同步控制；取消連動後，則可獨立調整四個角。滑桿的數值範圍為 0 至 100。工具初始的預設值為 24，產生的程式碼為 border-radius: 24px;。
像素與百分比單位的差異
在設定圓角時，選擇適合的單位會直接影響元素在不同尺寸下的視覺呈現：
- 像素 (px)：圓角大小固定不變。不論元素本身的寬高如何變化，圓角的半徑都維持相同的像素值。
- 百分比 (%)：圓角大小相對於元素本身的尺寸進行縮放。水平方向的百分比相對於元素的寬度計算，垂直方向的百分比則相對於元素的高度計算。
利用百分比單位，可以輕鬆達成響應式設計的幾何形狀。例如，將一個正方形元素的四個角皆設為 50%，該元素就會呈現為一個完美的正圓。
橢圓角模式與進階形狀
當關閉「橢圓角」模式時，每個角都是由單一半徑構成的四分之一圓。一旦啟用「橢圓角」模式，每個角將拆分為「水平」與「垂直」兩個獨立的控制滑桿。
這意味著每個角都可以擁有不同的橫向與縱向半徑，從而形成橢圓弧度。在 CSS 語法中，這種設定會以帶有斜線（/）的兩組數值形式呈現，分別代表水平半徑與垂直半徑。當所有角重新恢復為正圓弧度時，產生的程式碼則會自動縮回不帶斜線的簡短寫法。透過這種非對稱的圓角設定，設計者可以創作出更柔和、具有流動感的異形（blob）外觀。
快速套用預設樣式
為了加速設計流程，工具內建了五種常見的預設按鈕：
- 直角：將所有圓角半徑歸零。
- 圓角：套用標準的溫和圓角。
- 正圓：將所有角設為 50%。
- 異形：利用橢圓角模式建立不規則的流動形狀。
- 葉形：建立對角對稱的葉片狀外觀。
瀏覽器本機處理與隱私保護
本工具完全在用戶端運作。每個圓角形狀都在你的瀏覽器裡繪製,這裡設定的內容不會上傳到 BroBroGo。所有數值調整與 CSS 程式碼產生皆在瀏覽器本機即時處理。
常見問題
四個角和 px、% 是怎麼對應的?
四個滑桿按順時針分別對應左上、右上、右下、左下四個角。用 px 時圓角是固定的像素大小;用 % 時則相對於元素本身——橫向百分比按寬度算,縱向百分比按高度算,所以正方形設成 50% 就變成了圓。
橢圓模式是做什麼的?
關閉時每個角都是單一半徑的四分之一圓。打開後,每個角可以分別設橫向和縱向兩個半徑,這正是做出柔和、流動的異形(“blob”)形狀的關鍵。工具會自動寫成帶斜線的兩組數值,四個角都變回正圓時又會收回最短寫法。
怎麼做出正圓或膠囊形狀?
把四個角連動,切到 %,設成 50%——正方形就變成正圓。想做膠囊按鈕就改用 px,把某個角拖到超過按鈕高度的一半,不管多寬兩端都會是完整的圓。點一下「正圓」預設就能得到第一種效果的起點。