📇 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。

阴影多重合适？: 卡片多用单层柔阴影；层级越高阴影越扩散，具体以设计系统为准。结果以浏览器实时计算为准，纯前端本地处理、数据不上传；生成的样式与代码仅作快速产出参考，正式项目请以设计系统、规范与浏览器实测为准。
生成的代码/图片能直接用吗？: 可直接复制使用，建议粘到项目后在浏览器实测微调；本工具只生成不托管。
会保存或上传我的内容吗？: 结果以浏览器实时计算为准，纯前端本地处理、数据不上传；生成的样式与代码仅作快速产出参考，正式项目请以设计系统、规范与浏览器实测为准。