box-shadow inset 的颜色通过修改 box-shadow 值中第一个颜色值实现，支持十六进制、rgb()、hsl()、命名色及 transparent；漏写颜色会回退到当前文字色，导致不可控；需确保元素有背景、尺寸和合适 box-sizing 才可见；性能上不支持 gpu 加速，多层或大模糊值易卡顿；ie9–11 不支持 rgba 透明度及 border-radius 下的正确圆角。
box-shadow inset 的颜色怎么改
直接改 box-shadow 值里最前面的那个颜色值就行，比如 box-shadow: inset 0 0 10px #ff6b6b 中的 #ff6b6b 就是内阴影颜色。它和外阴影一样，支持所有 CSS 颜色表示法：十六进制、rgb()、hsl()、命名色，甚至 transparent。
常见错误是只写偏移和模糊值，漏掉颜色，比如 box-shadow: inset 0 0 10px —— 这时浏览器会用当前文字颜色（color）作为阴影色，结果不可控，尤其在深色模式或继承链复杂时容易意外变黑或变白。
- 如果想让内阴影“隐形”但保留占位（比如配合 transition），用
transparent最稳妥 - 用
rgba()可以同时控制颜色和透明度，比单独配opacity更安全（后者会影响整个元素） - 别依赖系统默认色，显式声明颜色是底线
inset 内阴影为什么没显示出来
最常见原因是元素没有「可渲染的背景」或「足够尺寸」。内阴影是“画在元素内部”的，如果 background-color 是透明的、元素高度为 0、或者被父容器裁剪（overflow: hidden），阴影就看不见。
另一个隐蔽坑是 border：当有实线边框时，内阴影默认从 border 内侧开始绘制；如果 border 太宽或用了 box-sizing: border-box，可能把阴影“挤”到不可见区域。
- 先确认元素有明确宽高（哪怕只是
min-height: 20px） - 临时加个
background-color: #eee看阴影是否浮现 - 检查父级是否有
overflow: hidden或clip-path - 想让阴影从内容区边缘起始？加
box-sizing: content-box并确保 padding 合理
box-shadow inset 的性能影响大吗
单个简单内阴影（比如 inset 0 2px 4px rgba(0,0,0,0.1)）基本无感；但一旦叠加多层、用大模糊值（>20px）、或在滚动容器里频繁重绘（如列表项 hover 效果），就会触发全层重绘，iOS Safari 和低端 Android 上容易卡顿。
更麻烦的是，inset 阴影无法被 GPU 加速（不像 transform 或 opacity），浏览器只能走 CPU 渲染管线。
- 避免在
:hover或@keyframes里动态改变box-shadow模糊半径或偏移量 - 用
filter: drop-shadow()替代？不行——它只支持外阴影，inset场景不适用 - 真要高性能内凹效果，考虑用渐变背景模拟：
background: linear-gradient(135deg, #0002, transparent 50%)
兼容性要注意哪些老版本问题
box-shadow 自 IE9 起支持，但 inset 在 IE9–IE11 中存在两个硬伤：一是不支持 rgba() 的 alpha 通道（透明度被忽略），二是当和 border-radius 同时使用时，内阴影圆角会错位或消失。
Android 4.3 及更早 WebView 也存在类似问题，且不支持 hsl() 颜色格式。
- 如果必须兼容 IE9–11，用十六进制色 +
!important强制覆盖（某些 UA 样式会干扰） - 搭配
border-radius时，把border-radius设在父容器上，子元素用overflow: hidden裁剪，绕过 inset 圆角 bug - 移动端兼容性比桌面端更差，建议用
@supports (box-shadow: inset 0 0 0 #000)做特性检测再加载增强样式
真正难搞的不是语法写不对，而是阴影在不同设备上“有时出现、有时被吃掉、有时颜色发灰”——这些都得靠真实机型连着 devtools 逐个试，参数调得再准，不跑一遍真机就等于没调。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
