如何用css框架实现卡片阴影和圆角
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）
卡片标题
这是一张带有阴影和大圆角的卡片。
Tailwind CSS 中设置卡片样式
Tailwind 使用实用类直接控制外观，灵活性更高。
- 用 rounded-lg、rounded-xl 等设置圆角大小
- 使用 shadow、shadow-md、shadow-lg 添加不同层级的阴影
- 结合 p-4、bg-white 构建完整卡片
卡片标题
这是一张 Tailwind 风格的卡片，带大阴影和圆角。
其他框架或自定义扩展
其他框架或自定义扩展像 Bulma、Materialize 等也提供类似功能。若需自定义，可基于框架基础上覆盖CSS：
- 检查框架默认的 border-radius 值，按需调整
- 用 box-shadow 自定义阴影颜色和扩散效果
- 确保在响应式场景下视觉一致
.custom-shadow {
@apply shadow-2xl;
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
}
基本上就这些。主流框架都让添加卡片阴影和圆角变得直观高效，选择合适类名组合即可快速出效果。
