工具用的順手嗎？
你的回饋能幫助我們做得更好
視覺化調整圓角、陰影、漸變等CSS3效果，實時生成程式碼，快速應用到網頁中。
單獨控制四個角的圓角，快速生成卡片、按鈕或標籤的圓角樣式。
實時預覽
拖動引數後即時檢視效果變化。
CSS 程式碼
複製後可直接貼上到樣式檔案中。
border-radius: 16px 16px 16px 16px;概覽
了解工具能解決的問題、計算或處理邏輯，以及資料邊界。
這個 CSS 程式碼產生器讓你在圓角、盒陰影、線性漸層與 transform 四種模式間切換，調整數值和顏色時可同步查看預覽、CSS 規則及目前模式的單一屬性值。適合先試出卡片、按鈕或區塊的視覺樣式，再把程式碼帶回自己的專案。
圓角模式分別設定左上、右上、右下、左下四角，並以 px 輸出 border-radius。盒陰影由水平／垂直偏移、模糊半徑、擴散半徑、色彩、不透明度與內陰影選項組成。漸層模式產生兩個顏色停靠點的線性漸層；transform 模式則組合水平／垂直位移、旋轉、縮放與傾斜。這些屬性的語法與作用可分別參考 MDN 的 border-radius、box-shadow、linear-gradient() 和 transform 說明。
輸出區有兩種可複製內容：一份以 .generated-box 為選擇器的 CSS 規則，以及目前模式的屬性宣告。例如圓角值可呈現為 border-radius: 16px 16px 16px 16px;。完整規則還會包含背景色、文字色、邊框和圓角等基礎宣告；選擇漸層時背景改為漸層，選擇陰影或 transform 時則加上對應屬性。
指南
依步驟完成操作，並透過範例核對輸入與結果。
切換圓角、盒陰影、漸層背景或變形。一次只編輯一種效果模式；切換後，面板會顯示該模式的控制項。
顏色欄位接受六位十六進位色碼，例如 #2563eb。滑桿數值以畫面標示的 px、deg 或百分比為單位。陰影可反轉偏移方向、改成內陰影；漸層可改角度和起訖色標位置。
比對示意預覽後，可複製整段 CSS 規則，或只複製目前屬性值。把規則中的選擇器改成專案實際使用的類別名稱；若只取單一屬性，則貼入既有選擇器的大括號內。
將樣式放進目標頁面後，檢查元素尺寸、背景、邊框及其他既有宣告是否互相覆蓋，再依實際版面調整。示意區的元素與你的頁面不同，預覽結果不能代替專案內測試。
若四個角分別設為 8、12、16、20 px，輸出的 border-radius: 8px 12px 16px 20px; 依序代表左上、右上、右下、左下。只需等圓角時，讓四個數值相同即可。
情境
查看這項工具在不同工作與生活流程中的用法。
製作資訊卡片時，先試四角半徑與陰影位移、模糊度，複製屬性值放進卡片規則，再到實際頁面確認與原本邊框、背景的搭配。
討論按鈕或區塊的漸層時，可共同查看角度、兩端色碼及停靠位置，將產生的背景宣告作為實作起點。
初學者逐一改變陰影偏移或 transform 的位移、旋轉與縮放，觀察預覽差異，再對照屬性值理解 CSS 宣告的效果。
問答
集中解答常見疑問與容易混淆的問題。
輸出的是 CSS 規則或屬性宣告，應貼在樣式表或 HTML 的 <style> 區塊中，而不是當成頁面標記貼在任意位置。使用完整規則時，請把 .generated-box 改成實際元素的選擇器。
不會。輸出規則會帶有背景、文字色、邊框和圓角等基礎宣告，並依目前模式加入陰影、漸層背景或 transform；不同模式的專屬屬性不會全部累加。若要在同一個元素套用多種效果，可分別複製所需屬性，再自行合併到一條 CSS 規則。
文字欄位只接受完整的六位十六進位格式，例如 #12abef。不符合格式的輸入會沿用該欄位先前有效的顏色；可使用色彩選擇器，或確認開頭有 # 且後面為六位英數字。
須知
使用前了解適用範圍、結果限制與必要提醒。
產生的樣式是視覺設計的起點，不會替你建立完整頁面、選擇專案中的正確選擇器，或檢查與既有 CSS 的層疊衝突。完整規則含有預設背景、文字色、邊框與圓角；複製前請確認這些基礎宣告是否適合目標元素，避免覆蓋原有設計。預覽只展示示意元素和目前參數，無法代表不同螢幕、瀏覽器、版面尺寸或互動狀態下的最終效果。請在目標網站檢查可讀性、排版與實際瀏覽器呈現；需要支援特定瀏覽器版本時，也應另外確認相關 CSS 屬性的相容性。
推薦
查找相關工具、專題與可用的 API 能力。