使用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工具类（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;（去除阴影）
示例：给一个卡片添加中等圆角和中等阴影
.rounded-md .shadow-md
组合使用：创建美观的卡片组件
将圆角与阴影工具类结合，能快速打造视觉上吸引人的UI元素。
典型卡片结构：
.rounded-lg .shadow-lg p-6 max-w-sm这样一段代码就能生成一个带有圆角、阴影、内边距的响应式卡片，无需额外写CSS。
自定义与响应式扩展
你可以在项目中根据设计系统扩展这些工具类。例如增加 .rounded-t-lg（仅顶部圆角）或 .shadow-hover（悬停时出现阴影）。
配合响应式前缀，如Tailwind中的 .md:rounded-lg，可实现不同屏幕下的圆角与阴影变化。
基本上就这些。通过合理组织 border-radius 和 box-shadow 的工具类，能大幅提升开发效率，同时保持视觉一致性。
