🇯🇵 日本語 | 🇺🇸 English | 🇪🇸 Español | 🇵🇹 Português | 🇹🇭 ไทย | 🇨🇳 中文

CSS模板：卡片布局（圆角 + 阴影）

📝 使用场景

此模板适用于展示产品卡片、用户简介等内容块，适合初学者使用，能快速添加美观的设计样式。

📘 说明

border-radius 用于设置圆角，box-shadow 用于添加阴影，能让元素呈现立体感和柔和效果。简单而实用。

✅ 示例

这是一个带有圆角和阴影的卡片样式盒子。

📄 代码（部分）

<style>
.card {
  border-radius: 12px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
  padding: 1.5rem;
  background-color: #ffffff;
  max-width: 400px;
  margin: 1rem auto;
}
</style>

<div class="card">
  这是一个卡片盒子。
</div>

📦 代码（完整HTML）

<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <title>卡片布局示例</title>
  <style>
    .card {
      border-radius: 12px;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
      padding: 1.5rem;
      background-color: #ffffff;
      max-width: 400px;
      margin: 1rem auto;
    }
  </style>
</head>
<body>
  <div class="card">
    这是一个带有圆角和阴影的卡片样式盒子。
  </div>
</body>
</html>
已复制！

🎨 卡片设计的多样化样式

以下是对基础卡片设计进行进一步优化的方法。通过调整 box-shadow 的值，可以实现更具立体感的效果。例如，box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); 能营造出更明显的阴影效果。

🌈 颜色与悬停效果

如果想为卡片添加颜色，可设置 background-color。此外，使用 .card:hover { transform: translateY(-4px); box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); } 可实现在鼠标悬停时卡片上浮的效果。

📱 响应式支持

要根据屏幕尺寸调整卡片宽度，建议使用 width: 90%; 替代 max-width。结合媒体查询，例如 @media (min-width: 768px) { .card { width: 50%; } }，可以在桌面端实现两列布局。

卡片内部内容的布局也同样重要。通过添加 display: flex; 和 flex-direction: column;，可灵活控制子元素的排列方式，尤其适用于包含按钮或图片的卡片。

这种卡片设计适用于多种场景，例如商品列表、博客文章缩略图或仪表板组件。通过调整阴影和圆角的平衡，可打造符合整站风格的设计。

相关模板