如何用box shadow与border radius组合实现CSS卡片式布局？

在网页开发中，卡片式布局是非常常见的UI形式。借助CSS的border radius与box shadow组合，我们可以不依赖任何图片或框架，仅用样式就实现一个具有圆角和阴影效果的简洁卡片。

一、核心属性说明

要实现卡片效果，主要用到下面两个CSS属性：

• border-radius：设置元素边框的圆角半径，让生硬的直角变为圆角。
• box-shadow：为元素添加阴影，使卡片在视觉上脱离背景，产生悬浮感。

二、基础卡片实现

下面是一个最基础的卡片样式，通过组合上述两个属性完成：

.card {
  width: 300px;
  padding: 20px;
  background-color: #ffffff;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  margin: 16px;
}

在HTML中，只需要一个带有card类的容器即可：

<div class="card">
  <h3>卡片标题</h3>
  <p>这里是卡片的文本内容描述。</p>
</div>

三、进阶用法

1. 悬停效果

通过:hover伪类增强交互感，鼠标移上时阴影加深、卡片轻微上移：

.card:hover {
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
  transform: translateY(-4px);
  transition: all 0.3s ease;
}

2. 多卡片排列

使用flex布局让多个卡片横向排列并自动换行：

.card-list {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

四、参数建议

不同场景下可参考以下取值：

五、小结

使用border radius与box shadow组合是实现CSS卡片布局最简单有效的方式。掌握圆角与阴影的基础写法后，再配合flex或grid布局，就能快速搭建出整齐美观的卡片列表，适用于绝大多数后台与官网页面。

CSS卡片布局box_shadowborder_radius修改时间：2026-07-30 18:18:17