inset必须紧挨box-shadow:后书写且不可省略，正确写法为box-shadow: inset 0 2px 4px rgba(0,0,0,0.1)；漏写、错序或元素无背景色/被overflow隐藏均导致内阴影不可见。
box-shadow 的 inset 参数怎么写才生效
直接加 inset 就行，但必须放在 box-shadow 值的最前面，顺序错或漏掉都会变成外阴影。常见错误是复制了外阴影代码后只改了颜色，忘了补 inset。
标准写法：box-shadow: inset 0 2px 4px rgba(0,0,0,0.1);
-
inset是关键字，不是可选参数，不写就不是内阴影 - 四个值顺序不能乱：水平偏移、垂直偏移、模糊半径、颜色（扩展值如 spread-radius 可选）
- 负值偏移（如
-2px）会让阴影往反方向“缩进”，配合inset容易误判效果，建议先用0 0调试
为什么加了 inset 还没看到阴影
最常被忽略的是元素没有「背景色」或「内容」导致阴影不可见——inset 阴影是“抠”在元素内部的，如果元素本身透明且无内容，阴影就悬在空中，人眼看不到。
- 确保元素有
background-color（哪怕只是#fff） - 检查父容器是否设置了
overflow: hidden，可能把内阴影裁掉了 - 某些情况下，
border会遮挡紧贴边缘的内阴影，可临时设border: none排查 - Flex/Grid 容器里的子项若未设置宽高，可能渲染为 0×0，阴影自然不出现
input、textarea 等表单控件怎么加内阴影
原生表单控件默认有系统样式干扰，直接写 box-shadow: inset ... 可能被覆盖或表现异常，尤其在 Safari 和旧版 Chrome 中。
- 必须重置默认外观：
appearance: none;（加-webkit-appearance和-moz-appearance兜底） - 显式设置
background-color和border，避免依赖 UA 样式 - textarea 要注意
resize属性，有时拖拽角会盖住右下角阴影 - 示例：
input { appearance: none; background: #fff; box-shadow: inset 0 1px 3px rgba(0,0,0,0.08); }
性能和兼容性要注意什么
inset 阴影本身性能开销不大，但模糊值（第三个参数）过大（比如 >20px）+ 高频重绘（如滚动中持续触发）可能引发卡顿，尤其在低端 Android 设备上。
- IE 不支持
inset（IE10+ 才开始支持，IE9 及以下完全无效） - 模糊半径超过 10px 后视觉提升有限，但渲染成本线性上升，建议控制在
6px以内 - 避免在
:hover或@keyframes中动态切换inset和非inset，浏览器可能触发 layout，推荐用 opacity 或 transform 动画替代
真正难调的不是语法，而是阴影和背景、边框、文字之间的层次关系——多一层 z-index 不起作用，得靠 background-clip 或伪元素微调。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
