CSS圓角產生器
視覺化CSS圓角產生器，獨立調整每個角的圓角半徑，即時預覽並立即複製產生的CSS程式碼。
什麼是CSS border-radius？
CSS border-radius是一個用於圓角化元素外邊框邊緣的屬性。可以使用一到四個值獨立設定每個角，也可以使用border-top-left-radius等長屬性單獨控制每個角。
如何用border-radius製作完美圓形？
在正方形元素（寬高相等）上設定border-radius為50%即可建立完美圓形。對於橢圓，在矩形元素上使用border-radius: 50%。
border-radius可以使用哪些單位？
border-radius支援px、%、em、rem、vw、vh等CSS長度單位。百分比相對於元素的尺寸，而px等絕對單位提供固定值。
border-radius的簡寫語法是什麼？
簡寫遵循以下模式：左上 右上 右下 左下。一個值套用於所有角。兩個值分別設定左上/右下和右上/左下。三個值分別設定左上、右上/左下和右下。
能建立橢圓形圓角嗎？
可以，使用斜線（/）語法可以分別定義水平和垂直半徑。例如border-radius: 50% / 100px建立一個具有不同水平和垂直半徑的橢圓曲線。
border-radius適用於所有元素嗎？
border-radius適用於大多數HTML元素，包括div、button、img和input。但在沒有設定overflow: hidden的元素上可能不會裁剪溢出內容。
能用border-radius建立複雜形狀嗎？
可以，透過為每個角組合不同的半徑值，可以建立膠囊形、橢圓形、葉子形和自訂有機形狀。百分比值非常適合響應式設計。
border-radius在所有瀏覽器中都支援嗎？
是的，border-radius在所有現代瀏覽器中都支援，包括Chrome、Firefox、Safari、Edge和行動瀏覽器。自2011年以來就是CSS3的一部分，相容性極好。
如何製作膠囊形按鈕？
將border-radius設定為等於或大於元素高度一半的值。對於40px高的按鈕，使用border-radius: 20px或更高值即可建立膠囊形狀。
border-radius會影響背景圖片嗎？
是的，border-radius會裁剪元素的背景、背景圖片和邊框。背景會自動跟隨圓角。
可以對border-radius做動畫嗎？
可以，border-radius支援CSS過渡和動畫。可以在不同的半徑值之間平滑過渡，建立互動式的懸停和點擊效果。
border-radius可以和CSS變換一起使用嗎？
可以，border-radius與rotate、scale和translate等CSS變換配合良好。圓角會隨元素一起變換。
如何建立帶邊框的圓形？
在寬高相等的正方形元素上套用border-radius: 50%，然後新增border屬性。邊框會跟隨圓形形狀。
單獨角屬性和簡寫有什麼區別？
border-top-left-radius等單獨屬性可以精確控制每個角。簡寫border-radius可以在一個宣告中設定多個角。兩者產生完全相同的CSS輸出。
如何使用CSS圓角產生器
用這款 CSS border-radius 產生器直覺地設計圓角。全部在本地瀏覽器中執行，你的資料不會上傳到任何伺服器。
- 在 Unit 下拉選單中選擇 px、%、em 或 rem 單位。
- 拖動 Top Left、Top Right、Bottom Right、Bottom Left 四個滑桿，獨立調整每個角的圓角大小。
- 開啟 Link all corners 開關，可讓四個角統一使用同一個數值。
- 從預覽中複製產生的 CSS，貼到你的樣式表裡。
把四個角都設為 50% 可得到正圓或膠囊形；使用 em 或 rem 能讓圓角隨字級自動縮放。
相關工具
- CSS 陰影產生器 免費線上 CSS box-shadow 產生器。視覺化建立精美陰影，可調整偏移、模糊、擴展、顏色和內陰影。即時預覽，即時複製程式碼。
- CSS 漸層產生器 視覺化建立精美 CSS 漸層。產生支援多色標、自訂角度和位置的線性、徑向和錐形漸層。即時複製可投入生產的 CSS 程式碼。
- CSS Grid產生器 免費線上視覺化CSS Grid產生器，即時預覽。互動式建立響應式網格佈局，一鍵匯出可用的CSS程式碼。
- CSS Flexbox產生器 視覺化CSS Flexbox產生器,即時預覽。調整Flex屬性,即時取得可用的CSS程式碼。
- 創意圓角產生器 免費線上創意圓角產生器。拖曳 8 個控制點或選擇 blob 預設，快速建立有機 CSS 形狀並複製 border-radius 程式碼。
- 顏色轉換器 免費線上顏色轉換器。即時轉換 HEX、RGB、HSL、HSV 格式，附視覺化拾色器。100% 隱私保護，瀏覽器本地運行。
- CSS 緩動函數產生器 免費線上 CSS 緩動產生器。在互動曲線上拖曳 cubic-bezier 控制點，內建 18 種預設，小球循環動畫即時對比，一鍵複製 timing function。
- CSS 文字陰影產生器 免費線上 CSS text-shadow 產生器。多層陰影可調偏移、模糊、顏色與透明度，內建霓虹、3D、復古、光暈等預設，即時預覽並一鍵複製程式碼。