tailwind v3.4 不支持原生 shadow-inner 类，需手动配置 inset box-shadow 实现内阴影；推荐扩展 theme 添加 inner 阴影，或使用任意值语法，同时注意 overflow 和 z-index 对渲染的影响。
tailwind中没有原生shadow-inner类可用
Tailwind v3.4 仍不提供 shadow-inner 这类开箱即用的内阴影工具类——它早在 v1.0 就被移除了。搜索时看到旧文档或 Stack Overflow 示例里用了 shadow-inner，基本是过时信息。直接写 class="shadow-inner" 不会生效，也不会报错，只是静默忽略。
要用inset box-shadow，必须手动写或扩展配置
真内阴影只能靠 box-shadow: inset ... 实现。Tailwind 的 shadow- 类本质就是预设的 box-shadow 值，不带 inset 关键字就不是内阴影。
- 最简临时方案：启用 JIT 模式 + arbitrary value，写
shadow-[inset_0_2px_4px_rgba(0,0,0,0.1)] - 需确保
tailwind.config.js中content正确配置，否则 arbitrary value 不会被扫描生成 - 长期项目建议扩展 theme：
theme: { extend: { boxShadow: { inner: 'inset 0 2px 4px rgba(0,0,0,0.1)' } } }，之后可用shadow-inner - 注意 Safari 旧版本对
inset阴影渲染不稳定，尤其配合大圆角时边缘可能断裂
ring-inset 不是内阴影，别混淆
ring-inset 和 ring 是绝对定位伪元素描边，不是 box-shadow，更不是内阴影。它没有模糊、不响应光源模拟、也不随 border-radius 自然收口。
- 常见误用：给圆角卡片加
ring-1 ring-inset ring-gray-300，结果描边在圆角处轻微溢出——这是浏览器渲染限制，无法修复 -
ring-1实际描边宽度约 2px（含抗锯齿），且默认无颜色，必须显式加ring-gray-300 - 想模拟“凹陷输入框”？
ring-inset给不了明暗过渡，不如用shadow-sm shadow-gray-200/50+border border-gray-300
内阴影容易被 overflow 或 z-index 吃掉
哪怕 box-shadow: inset 写对了，也可能看不见——最常被忽略的是父容器的 overflow: hidden 或子元素的 z-index 层级覆盖。
- 检查父级是否有
overflow-hidden，它会裁剪掉 inset 阴影的扩散区域 - 如果元素内有相对定位子元素，且
z-index大于 0，可能压住内阴影 - 深色背景上用浅色内阴影（如
inset 0 1px 2px rgba(255,255,255,0.3)）比黑灰更安全，避免发灰失焦
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
