免費CSS 圓角產生器

工作原理

圓角產生器完全在瀏覽器中執行——沒有伺服器、沒有庫，也不上傳。它使用 React 狀態和 useMemo 直接在 JavaScript 中建立 CSS border-radius 值字串，然後作為內聯樣式應用到一個即時的 div 元素上，由瀏覽器自身的 CSS 引擎即時渲染形狀。

1. 1
   滑桿寫入狀態

   每個範圍輸入寫入八個數值狀態變數之一——四個水平圓角半徑，以及橢圓模式下的四個垂直半徑。統一模式透過 setAll 輔助函式將八個值合併為一個滑桿，同時同步所有值。
2. 2
   useMemo 組裝 CSS 值

   每當任一圓角值、單位（px 或 %）或橢圓開關改變時，useMemo 鉤子都會重新計算 border-radius 字串。標準模式下產生四值簡寫；開啟橢圓後，會加入斜槓分隔符號形成完整的八值語法——例如 32px 20px 20px 32px / 20px 32px 20px 32px。
3. 3
   瀏覽器 CSS 引擎渲染預覽

   計算出的字串作為內聯 borderRadius 樣式設定在普通 div 元素上。所有渲染都由瀏覽器的佈局引擎完成——沒有 canvas、沒有 SVG，也沒有第三方繪圖程式碼。
4. 4
   Clipboard API 複製輸出

   點選“複製”會呼叫 navigator.clipboard.writeText，根據所選格式開關，寫入 CSS 宣告（border-radius: ...;）或等效的 Tailwind 任意值類（rounded-[...]）。

相關工具