如何使用CSS工具类实现圆角与阴影_border-radius box-shadow实践

使用CSS工具类可高效实现圆角和阴影效果。1. 圆角工具类如 .rounded-sm、.rounded、.rounded-md、.rounded-lg、.rounded-full 对应不同 border-radius 值，便于快速设置元素圆角；2. 阴影工具类如 .shadow-sm、.shadow、.shadow-md、.shadow-lg、.shadow-xl 提供从细微到强立体感的 box-shadow 效果，.shadow-none 可去除阴影；3. 组合使用如 .rounded-lg .shadow-lg 添加内边距和最大宽度即可构建美观卡片；4. 支持扩展定制，如 .rounded-t-lg 实现顶部圆角，.shadow-hover 实现悬停阴影，并可通过响应式前缀 .md:rounded-lg 控制不同屏幕下的样式表现。该方法提升开发效率并保持设计一致性。

如何使用css工具类实现圆角与阴影_border-radius box-shadow实践

在现代前端开发中，使用CSS工具类（Utility Classes）可以快速实现常见的样式效果，比如圆角和阴影。这种方式被广泛应用于Tailwind CSS等原子化CSS框架中，也能帮助我们更高效地构建UI。

理解 border-radius 实现圆角

border-radius 属性用于设置元素的圆角效果。通过工具类的方式，我们可以预定义几种常用的圆角尺寸，便于复用。

常见圆角工具类命名与对应样式：

.rounded-sm → border-radius: 0.125rem;（小圆角）
.rounded → border-radius: 0.25rem;（默认圆角）
.rounded-md → border-radius: 0.375rem;
.rounded-lg → border-radius: 0.5rem;
.rounded-full → border-radius: 9999px;（完全圆形）

实际HTML使用示例：

.rounded-lg

使用 box-shadow 添加阴影效果

box-shadow 可以让元素拥有立体感，常用于卡片、按钮等组件。通过工具类封装不同强度的阴影，能快速应用。

常用阴影工具类定义：

.shadow-sm → box-shadow: 0 1px 2px rgba(0,0,0,0.05);
.shadow → box-shadow: 0 1px 3px rgba(0,0,0,0.1);（标准阴影）
.shadow-md → box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -1px rgba(0,0,0,0.06);
.shadow-lg → box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05);
.shadow-xl → 更强的投影，适合悬浮卡片
.shadow-none → box-shadow: none;（去除阴影）