基於瀏器的 border-radius 產生器是遠端 border-radius API 最簡單的用戶端替代方案：它以順時鐘 CSS 順序接受四個數值圓角半徑，在完全不發出網路請求的情況下回傳最短的有效宣告，且永遠不會將您的設計值暴露給遠端端點。CSS Border Radius 產生器 完全在瀏覽器內執行，將所有輸入保留在本地，並對其所顯示的預覽使用相同的產生宣告，因此您所看到的四捨五入、正規化與最終格式化結果,將與您的樣式表所收到的完全相同。單位選擇器是像素與百分比之間的單一切換,複製按會以最短的等價簡寫形式提供壓縮字串,而且沒有需要學習的文件介面、沒有需要管理的 API 金鑰、沒有需要監控的速率限制儀表板,也沒有在上游服務發生事件時需要維護的備援方案。作為 API 的替代方案,其價值主張十分具體：相同的最終 CSS 字串,卻擁有更少的基礎設施與更小的故障表面。
大多數 border-radius API 只是少量 CSS 邏輯的封裝。它們接受四個數值、可選的單位選擇、可選的斜線分隔橢圓形式,然後回傳如 border-radius: 12px 8px 12px 8px 的字串。該函式僅需幾行 JavaScript 即可實現,而將這些程式碼部署到遠端伺服器會增加延遲、需要管理的金鑰、需要學習的文件介面,以及在服務中斷或網路無法連線時的性失敗模式。純瀏覽器的產生器將這個迴圈摺疊成直接且具確定性的轉換：輸入是四個角,輸出是最短的有效 CSS 宣告,中間沒有 API 金鑰、環境變數或速率限制儀表板。
以本地工具取代 API 也能消除版本漂移的問題。遠端端點會演進,因此圓角順序、壓縮規則與單位處理方式可能在不同版本間變動,您的測試固定資料會開始因與程式碼無關的原因而失敗。產生器的壓縮規則就是公開的 CSS 簡寫規則本身,其定義於 W3C CSS 背景與邊框規範,並記載於 MDN 的 border-radius 參考頁面。由於相同的數值同時供應給預覽與複製的宣告,您所看到的四捨五入、正規化與最終格式化,就是您的元件將會收到的四捨五入、正規化與最終格式化。
何時純瀏覽器的 border-radius 產生器是正確的選擇
有三個理由涵蓋了大多數團隊在實際並不需要 API 時卻仍採用 API 的情況,而相同的邏輯也適用於其他用戶端 CSS 產生器。
- 延遲與可用性。 若要獲得即時預覽,每次按鍵都必須連線至端點,而本地工具因為完全沒有請求,能在微秒內回應。本地工具在離線、位於企業防火牆後,或上游服務發生事件時仍可正常運作。
- 營運表面。 API 需要金鑰、計費控管、使用記錄、重試機制,以及伺服器回傳 5xx 時的備援方案。純瀏覽器的產生器完全不需要這些,也永遠不會回傳 5xx;唯一的失敗模式是開發者輸入了無效字元。
- 確定性與重現性。 當測試對產生的 CSS 進行快照時,API 的更新可能會改變固定資料的字串,卻不影響其底層形狀。具有明確壓縮規則的本地工具每次執行都會產生完全相同的字串,因此快照測試能保持穩定。
相同的模式在各種 CSS 輔助工具中重複出現。Box Shadow Generator API alternative 將相同的邏輯套用於 box-shadow 宣告,一旦接受底層轉換小到足以在頁面內執行,這就說得通了。
設定圓角半並複製簡寫
端對端的工作很小,步驟與產生器以順時鐘 CSS 順序所呈現的四個控制項相符。
- 為 左上 輸入半徑,這是 CSS 簡寫在四個值皆存在時所讀取的第一個值。
- 為 右上 輸入半徑,也就是第二個值。
- 為 右下 輸入半,即第三個值。
- 為 左下 輸入半徑,即第四個也是最後一個值。
- 選擇單位：固定弧度使用 px,而會隨元素縮放的半徑則使用 %。
- 在複製之前,先於顯示的方塊尺寸下檢視預覽。
- 複製壓縮後的宣告並貼到實際元件中,以針對實際的寬度、高度、邊框、內距、焦點外框與響應式斷點進行測試。
雙單位與三單位簡寫的運作方式也與 CSS 的讀法一致。兩個值時,第一個值套用於左上與右下,第二個值則套用於右上與左下。三個值時,中間的值由右上與左下共用。產生器明確標示每個角,因此您無需記住這些對應關係。
簡寫壓縮的運作方式
產生器會在您複製之前,將四個角數值壓縮為最短的等價 CSS 簡寫。規則集由 CSS 規範所固定,而非由工具所選擇,因此輸出在各瀏覽器與各版本之間都能保持可攜性。
| 輸入模式 | 輸出的簡寫 | 原因 |
|---|---|---|
| 四個圓角全部相等 | 單一值 | 每個位置共用相同的半徑。 |
| 相對的圓角相等 | 兩個值 | 第一個值決定 TL 與 BR；第二個值決定 TR 與 BL。 |
| TR 與 BL 相等,TL 與 BR 不同 | 三個值 | 中間的值由 TR 與 BL 共用。 |
| 無對稱的相符 | 全部四個值 | 簡寫會誤傳其中一個圓角。 |
手寫的 API 包裝函式也會進行相同的壓縮,但壓縮輸出鮮少成為 API 文件的重點;團隊每次都得重新發明這條規則。讓產生器套用這條規則,代表複製的字串已經是您所選圓角的最短有效形式,這能讓您的 CSS 對下一位編輯它的開發者保持可讀性。
像素與百分比的差異,以及兩者實際繪製的內容
px 與 % 之間的單位選擇器只是輕輕一按,但兩者的行為差異大到足以讓這個選擇成為設計的一部分,而非單純的預設值。
| 單位 | 行為 | 典型模式 |
|---|---|---|
| px | 固定的絕對半徑,與元素大小無關。 | 卡片、按鈕、輸入欄、標籤、 avatar 框架。 |
| % | 於渲染時根據邊框方塊計算。 | 藥丸形、橢圓形、葉片、極度不對稱的形狀。 |
50px 的像素值無論元素是 200px 寬還是 600px 寬,都會保持為 50px。百分比值的行為是元素參考尺寸的一半,因此正方形上的 50% 半徑會產生形圓角,而在寬矩形上同樣的 50% 則會產生橢圓形的端點。當相鄰弧線會重疊時,覽器會調降指定過大的半徑;此種正規化屬於標準的 CSS 行為,而非複製宣告的瑕疵。
本地產生器刻意不涵蓋的範圍
對於聚焦於單一半徑的工作流程,這些限制是刻意設定的,並非偶然,且它們直接對應於您是否仍需要 API 的決策。
- 負值。 CSS 不允許負的半徑,因此輸入會拒絕任何小於零的值。
- 非有限的數字。 Infinity 與 NaN 無法構成有效的宣告,因此也會被拒絕。
- 橢圓斜線語法。 進階形式 border-radius: 12px / 24px 讓每個圓角可擁有以斜線分隔的獨立水平與垂直群組。本焦點產生器對每個圓角僅輸出一個半徑;混合軸的形狀需要在樣式表中直接使用斜線語法。
- 大於 100 的百分比。 由於 CSS 允許這類值,且瀏覽器會對結果進行正規化,因此選擇器會予以接受,但正規化後的視覺差異通常會消失。
這些限制讓工具保持精簡、可預測,並對其不涵蓋的範圍保持透明,而這也正是讓您能放心地從技術堆疊中移除 API 的同一項特質。
常見圓角形狀的快速訣竅
對於統一的卡片,從四個圓角皆為 12px 至 24px 開始。對於藥丸形,在同一個圓角上使用單一較大的像素值或單一 50% 的值。對於有機感的面板,變化所有四個百分比,讓每條弧線依各自的軸縮放。按鈕介於卡片與藥丸形之間,因此請根據您的目標尺寸指引測試可點擊的圓角區域;當半徑非常大時,圓角會縮小可點擊範圍,這正是透過焦點與指標事件來驗證、而非僅依賴形狀本身的真實理由。
背景、邊框與 overflow: hidden 的裁切都會沿著弧線進行,因此過小的內距會讓內容在視覺上擠向圓角。在貼上宣告後,務必重新檢查內距、焦點外框與對比度,且絕不依賴圓角形狀或顏色來傳達狀態。產生器是生產輔助工具;真正的驗證發生在實際元件上。
對於圍繞產生的 CSS 開發快照測試套件的開發者而言,本地產生器也是一個穩定的參考：相同的輸入能在不同機器與不同天數之間產生相同的輸出,無需在 API 變更其序列化方式時更新結構描述,無需在遠端服務棄用端點時更新測試固定資料,也無需在連線中斷時維護備援方案。
如需更深入的探討,請參閱 批次 Box Shadow 產生器：堆疊多個 CSS 圖層。