<p>Tailwind 的 shadow- 和 border- 类需精准匹配设计意图与上下文：预设阴影档位对应特定场景，hover 阴影需显式 transition、避免 overflow-hidden 裁剪，深色模式须同步调整颜色，自定义值须严格遵循格式规范。</p>
直接用 shadow- 类加阴影、border- 类加边框是最简路径，但错配尺寸、忽略状态响应或乱改颜色会立刻让 UI 显得廉价或失焦。
shadow-类不是“一键立体”，档位有明确设计意图
每个预设阴影都对应一组精心调校的 box-shadow 值，不是单纯变大变深：
-
shadow-sm是0 1px 2px 0 rgba(0,0,0,0.05)：偏移极小、无负扩散，适合按钮悬停时轻微抬升，别用在卡片上 -
shadow-md含-1px扩散值：0 4px 6px -1px rgba(0,0,0,0.1)，让主体视觉更“贴边凸出”，是卡片默认选择 -
shadow-lg是双层阴影：0 10px 15px -3px ... , 0 4px 6px -2px ...，压得低、模糊强，专为模态框/悬浮层设计 -
shadow-2xl模糊半径达50px以上，在 Android WebView 或 Safari 15.4 以下易掉帧，慎用于移动端
hover:shadow-* 失效的真正原因不是写法错
常见静默失效，其实是缺了三样东西：
- 必须显式加
transition-shadow，只写transition不生效 - 父容器设了
overflow-hidden，阴影会被直接裁掉——这不是 bug，是渲染规则 - 深色背景上用默认
rgba(0,0,0,0.2)阴影会糊成一片，得手动换色：hover:shadow-[0_8px_16px_rgba(255,255,255,0.15)] - Tailwind 不会为自定义 shadow 名称（如
shadow-card-lg）自动补hover:变体，必须在配置里显式定义并启用variants: ['hover']
border-类和 shadow-类配合时最容易翻车
边框和阴影不是简单叠加，而是相互干扰的视觉层：
立即学习“前端免费学习笔记（深入）”；
- 给圆角元素加
border再加shadow，若border-radius和阴影模糊半径不协调，边缘会发虚或断裂 -
ring-inset不是内阴影，它是绝对定位伪元素描边，没有模糊、不随圆角收口；想模拟凹陷输入框，用shadow-inner（需自定义）+border更可靠 - 深色模式下，
border-gray-300在暗背景上几乎看不见，得配dark:border-gray-700；同理，shadow的颜色也得同步调整，否则悬停时阴影突然变亮会很突兀 - 别在
overflow-hidden容器里强行加inset阴影——它需要扩散空间，被裁掉是必然结果
自定义 shadow 或 border 时，空格和逗号是编译器雷区
Tailwind 的 JIT 解析器对格式极其敏感，一个空格就可能让整个类失效：
- 扩展
theme.extend.boxShadow时，值必须是单行合法 CSS 字符串：'card-lg': '0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -1px rgba(0,0,0,0.06)' - 逗号前后不能有空格，否则解析器当成两个独立值，生成无效类
- 任意值语法中，空格必须全替换成下划线：
shadow-[inset_0_2px_4px_rgba(0,0,0,0.1)]，写成shadow-[inset 0 2px 4px rgba(0,0,0,0.1)]就静默失败 - 十六进制带 alpha（如
#0008）在 JIT 下不安全，优先用rgba()或hsla()
最常被忽略的是：阴影和边框的视觉目标从来不是参数本身，而是它服务的层级关系。多一层模糊不如少一个错误的 z-index，换一种颜色不如确认一次 overflow 状态。
