如何用css框架实现卡片阴影和圆角-css教程-PHP中文网

如何用css框架实现卡片阴影和圆角

P粉602998670

发布： 2025-10-31 21:00:02

原创

691人浏览过

Bootstrap和Tailwind等CSS框架通过预设类快速实现卡片阴影与圆角，如Bootstrap的.shadow和.rounded-3，Tailwind的shadow-lg和rounded-xl，结合p-4、bg-white等类构建完整样式，提升开发效率。

如何用css框架实现卡片阴影和圆角

使用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 使用实用类直接控制外观，灵活性更高。

Cardify卡片工坊

使用Markdown一键生成精美的小红书知识卡片

查看详情

用 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 自定义阴影颜色和扩散效果
确保在响应式场景下视觉一致

例如覆盖 Tailwind 默认阴影：

.custom-shadow {
  @apply shadow-2xl;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
}

登录后复制

基本上就这些。主流框架都让添加卡片阴影和圆角变得直观高效，选择合适类名组合即可快速出效果。

以上就是如何用css框架实现卡片阴影和圆角的详细内容，更多请关注php中文网其它相关文章！

大家都在看：

CSS属性值可以使用变量吗_CSS自定义属性与var函数用法如何用css工具PostCSS处理CSS变量 CSS在项目中如何定义通用样式类_CSS复用与模块化设计如何使用CSS伪类实现表格奇偶行样式_nth-child与nth-of-type应用 CSS项目从哪里开始写_CSS文件结构与模块划分思路