Softonic

CSS 卡片生成器

步 1 / 2

卡片标题

这是你的卡片预览。

下一个

卡片是商品图块、博客预览、个人资料和仪表盘小组件背后的容器。本生成器为该容器设置样式：选择背景色和边框色、圆角、内边距以及柔和的投影，结果会立即显示在页面上。预览中展示的是占位内容，请替换为你自己的标题、文本和操作。输出是一个可直接使用的 CSS 类。

如何设置卡片容器样式

  1. 1

    选择颜色

    选择卡片的背景色和边框色。

  2. 2

    设定形状

    选择适合你布局的圆角和内边距。

  3. 3

    添加阴影

    调整卡片下方柔和投影的模糊度和不透明度。

  4. 4

    预览并复制

    查看实时预览，然后将生成的 .card CSS 复制到样式表中。

生成的 CSS 包含什么

工具会输出一个名为 .card 的类：

.card {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}
  • background 是你选择的背景色
  • border 始终是所选颜色的 1px 实线
  • border-radius 和 padding 是你选择的值，单位为 px
  • box-shadow 使用固定的 4px 向下偏移，配合你选择的模糊度和不透明度

预览只是占位内容

预览中显示标题和段落，方便你判断比例。工具本身不输出 HTML：请将类应用到自己的容器上，并在其中放入标题、文本、图片或操作按钮。如果卡片会放在带颜色的页面背景上，请在那里检查边框对比度，而不仅是在预览中。

合理的限制

低于零的值会被限制为零，阴影不透明度保持在 0 到 1 之间。过大的内边距或模糊值可能产生意外效果，请将控件保持在实际布局中会使用的范围内。

与自己的标记组合

页面最简示例：

<div class="card">
  <h3>产品名称</h3>
  <p>简短说明</p>
</div>

容器样式不会限制内部内容：它只处理背景、边框、间距和阴影。

常见问题

不会，它只输出 .card 这个 CSS 类。请自己编写标记，例如用 div 或 article 包裹标题、文本和操作。

生成的边框始终是所选颜色的 1px 实线。如需其他粗细或样式，请修改 CSS 中的 border 行。

固定的 4px 垂直偏移让阴影柔和且清晰易读。柔和程度（模糊）和强度（不透明度）由你控制。

不会。预览文本仅用于展示。复制出的 CSS 不含内容，只有容器样式。

相关工具

ASCII 表参考

完整 ASCII 表，覆盖 0 到 127；列出每个代码的十进制、十六进制、八进制、二进制值和 HTML 数字字符引用写法，包括 NUL、LF、DEL。

HTML 字符参考

可搜索的 HTML 实体列表，含命名代码与数值代码，并支持一键复制特殊字符和符号。

键盘快捷键参考

搜索 macOS、Windows 和 Linux 上 VS Code、Chrome 以及使用 GNU Readline 的 Bash 的文档默认快捷键。

电话号码验证器

根据各国号码规划检查结构，并显示地区、类型以及E.164、国际、国内和RFC 3966格式。

变更日志生成器

根据分类条目生成 Keep a Changelog 风格的 Markdown 部分。将条目粘贴到 Added、Changed、Fixed 和 Removed 下，选择 Markdown 或纯文本，然后复制输出。

cURL 命令生成器

根据 HTTP URL、请求头、认证、JSON、原始数据或表单字段，在浏览器中私密生成适用于 POSIX Shell 或 PowerShell 的 cURL 命令。

此工具还提供其他语言版本