📇 CSS Card Generator

📐 工作原理與說明

把圓角、陰影、內邊距與配色引數組合為卡片 CSS（分層 box-shadow + border-radius），即時預覽並可複製；用於落地頁與列表卡片。

Adjust card radius, shadow, padding and colours with sliders and copy the CSS, previewing the result live for landing pages and lists.

背景色

圓角 (px)

陰影 X

陰影 Y

陰影模糊

內邊距 (px)

邊框色

邊框粗細

陰影色

陰影透明度

預覽

副標題

這是卡片的示例內容，演示生成的樣式效果。

📚 深度解析：卡片生成器

生成白底圓角卡

輸入：白底、圓角 16px、輕陰影、內距 20px。處理：組合背景/邊框/陰影。輸出：卡片預覽與 CSS。

陰影多重合適？: 卡片多用單層柔陰影；層級越高陰影越擴散，具體以設計系統為準。結果以瀏覽器即時計算為準，純前端本地處理、資料不上傳；生成的樣式與程式碼僅作快速產出參考，正式專案請以設計系統、規範與瀏覽器實測為準。
生成的程式碼/圖片能直接用嗎？: 可直接複製使用，建議粘到專案後在瀏覽器實測微調；本工具只生成不託管。
會儲存或上傳我的內容嗎？: 結果以瀏覽器即時計算為準，純前端本地處理、資料不上傳；生成的樣式與程式碼僅作快速產出參考，正式專案請以設計系統、規範與瀏覽器實測為準。