shadow-inner 是 Tailwind 的内阴影工具类，生成 inset box-shadow；而 shadow 系列为外阴影。二者模式不同、用途互斥：内阴影需配合背景色与尺寸才可见，常用于凹陷感交互，非装饰性投影。
shadow-inner 是什么，它和 shadow 有什么根本区别
shadow-inner 是 Tailwind 提供的专用内阴影工具类，它背后生成的是 box-shadow: inset ...；而默认的 shadow 系列（如 shadow-md）生成的是外阴影（box-shadow: ...，无 inset）。两者在视觉效果和用途上完全不重叠：内阴影常用于模拟凹陷、按压、卡片内容层叠感，外阴影用于悬浮、浮层、层级分离。
关键点在于：shadow-inner 不是“更小的 shadow”，也不是“阴影往里缩一点”——它是独立的 inset 模式，必须配合背景色或透明度才能看清效果。纯白底+shadow-inner 基本不可见。
为什么直接写 shadow-inner 没反应？常见失效原因
最常踩的坑是元素没有「足够对比度的背景」或「明确的高度/内容撑开」：
- 父容器或自身
background-color是白色（或与阴影颜色太接近），shadow-inner的暗色偏移就融进去了 - 元素是空的且未设
height/min-height/padding，导致渲染区域为 0，阴影无处可绘 - 用了
shadow-inner但没指定深浅级别（Tailwind 默认只提供shadow-inner，不带尺寸后缀；它对应的是固定的一组 inset 值，不是shadow-sm那套可选体系） - 试图对
button或input直接加shadow-inner，但被浏览器默认样式或用户代理样式覆盖了box-shadow
如何让 shadow-inner 看得见、用得准
实操中建议始终显式控制三个变量：背景、内边距、阴影强度（通过自定义配置扩展）：
- 给元素加一个非白色背景，比如
bg-gray-50或bg-slate-100，再叠加shadow-inner - 确保有内容或至少加
p-4/h-12让盒子存在物理尺寸 - Tailwind 默认
shadow-inner使用的是inset 0 2px 4px -2px rgba(0, 0, 0, 0.1)，如果觉得太淡，可在tailwind.config.js的theme.boxShadow中扩展，例如添加：inner-strong: 'inset 0 4px 8px -2px rgba(0, 0, 0, 0.2)'
，然后使用shadow-inner-strong - 对表单控件生效，需先重置原生样式：
appearance-none+shadow-inner+ 显式bg-white
内阴影在真实 UI 中的典型用法
它不适合做装饰性投影，而是服务于「感知深度」的微交互：
- 输入框聚焦时：用
focus:shadow-inner暗示“正在编辑内部”，比外阴影更符合直觉 - 折叠面板展开区顶部：加
shadow-inner模拟内容从下方“顶上来”的错觉 - 卡片内分隔区块：比如头像区域加
shadow-inner+rounded-t-lg，强化头像“嵌入”卡片的感觉 - 注意：不要在已带复杂渐变或图片背景的元素上硬套
shadow-inner，容易糊成一片；优先用于纯色、简洁背景场景
真正难的不是写对 class，而是判断这个界面元素是否需要「向内凹」的心理暗示——多数时候，设计师没想清楚这点，开发就容易堆一堆看不见的 shadow-inner。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
