Bootstrap和Tailwind等CSS框架通过预设类快速实现卡片阴影与圆角，如Bootstrap的.shadow和.rounded-3，Tailwind的shadow-lg和rounded-xl，结合p-4、bg-white等类构建完整样式，提升开发效率。
使用CSS框架实现卡片的阴影和圆角非常简单，大多数现代CSS框架都内置了现成的类来快速应用这些样式。以下是几种主流CSS框架中的实现方式。
Bootstrap 中实现卡片阴影和圆角
Bootstrap 提供了 .card 类以及辅助类来控制阴影和圆角。
- 使用 .card 创建基础卡片容器
- 通过 .shadow-sm、.shadow 或 .shadow-lg 添加不同强度的阴影
- 圆角默认已启用，可通过 .rounded 系列类调整（如 .rounded-3）
<div class="card shadow rounded-4" style="width: 18rem;">
<div class="card-body">
<h5 class="card-title">卡片标题</h5>
<p class="card-text">这是一张带有阴影和大圆角的卡片。</p>
</div>
</div>
Tailwind CSS 中设置卡片样式
Tailwind 使用实用类直接控制外观，灵活性更高。
- 用 rounded-lg、rounded-xl 等设置圆角大小
- 使用 shadow、shadow-md、shadow-lg 添加不同层级的阴影
- 结合 p-4、bg-white 构建完整卡片
<div class="p-4 bg-white rounded-xl shadow-lg max-w-sm"> <h5 class="text-lg font-medium">卡片标题</h5> <p class="mt-2 text-gray-600">这是一张 Tailwind 风格的卡片，带大阴影和圆角。</p> </div>
其他框架或自定义扩展
像 Bulma、Materialize 等也提供类似功能。若需自定义，可基于框架基础上覆盖CSS：
立即学习“前端免费学习笔记（深入）”；
- 检查框架默认的 border-radius 值，按需调整
- 用 box-shadow 自定义阴影颜色和扩散效果
- 确保在响应式场景下视觉一致
.custom-shadow {
@apply shadow-2xl;
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
}
基本上就这些。主流框架都让添加卡片阴影和圆角变得直观高效，选择合适类名组合即可快速出效果。
