在此运行 完全在你的浏览器里运行，不上传、不登录
卡片样式生成器
可视化配置卡片的内边距、圆角、阴影、边框与悬停效果，实时预览并一键复制 CSS。
布局
颜色与边框
阴影与悬停
预览
卡片标题
一段示例正文，方便直观判断行高、内边距与对比度。
预览是真实卡片元素并应用生成的 CSS，悬停即可查看悬停效果，确认后再复制代码。
怎么用
- 设置卡片的内边距、圆角（像素）与过渡时长（毫秒）。
- 挑选背景色与文字颜色，再设置边框宽度与边框颜色。
- 选择阴影档位（无/小/中/大）与悬停效果（无/上浮/阴影加深）。
- 把鼠标移到预览卡片上查看悬停态，点击生成 CSS，复制样式表与 HTML 片段。
常见用途
- 商品网格 —— 写组件前先把一排卡片的内边距与圆角对齐。
- 价格表 —— 给重点套餐试一版上浮加阴影加深的强调卡。
- 文档面板 —— 做出与页面设计变量一致的提示卡与警告卡。
- CSS 教学 —— 演示 box-shadow 与 transform 如何组合出悬停上浮。
常见问题
问：上浮效果会推挤布局吗？ 答：不会。上浮用 transform: translateY 实现，不触发重排，相邻卡片保持原位，只有悬停的卡片升起。
问：能做出直角卡片吗？ 答：可以。圆角设 0 就是直角；保留 4 px 左右的小圆角，观感会更柔和。
问：为什么阴影在我的手机上观感不同？ 答：box-shadow 是模糊渐变，低分屏与深色模式的采样方式不同。生成的仍是标准 CSS，差异来自渲染而非工具本身。
问：预览是图片吗？ 答：不是。预览是套用了生成 CSS 的真实卡片元素，内边距与文字回行的表现和上线后一致。
你的数据留在这台设备上
卡片样式生成器 完全在本地运行。你粘贴或拖入的一切都由你自己的浏览器处理，不会被传走。我们的服务器不保存任何东西——关掉标签页就没了。
你输入的内容不会发往服务器、不被记录，也不用于分析统计。首次加载之后即使断网，这个页面照样能用。