内阴影不能直接用 box-shadow inset 是因为其依赖背景色显影，透明背景下无承影面；需用 radial-gradient 在 background 中伪造承影面，注意层叠顺序、方向定位和 transparent 结束色。
内阴影为什么不能直接用 box-shadow 的 inset？
因为 box-shadow: inset 本质是「在元素盒模型内部投射阴影」，它依赖元素自身的背景色或透明度来显影。如果元素背景是纯透明（background: transparent）且父容器无颜色，阴影就不可见——不是函数没生效，而是没“承影面”。这时候光靠 box-shadow 无法独立成形。
用 radial-gradient 模拟内阴影的实操要点
真正可行的无标签方案是用 CSS 渐变覆盖层模拟：在 background 中叠加一个从半透黑到完全透明的径向渐变，定位在元素边缘内侧。关键不是“替代”，而是“伪造承影面”。
-
background必须声明多层，渐变层写在最底层（如：background: linear-gradient(...), radial-gradient(circle at top, rgba(0,0,0,0.15), transparent 20px);） - 渐变中心点用
at top/at bottom left精确控制阴影方向，避免全向模糊 - 结束色必须是
transparent，不能写rgba(0,0,0,0)——后者仍占渲染通道，可能干扰下层内容 - 不要用
background-color单独设置，它会覆盖整个background层叠链
color-mix() 或 hwb() 能不能参与内阴影计算？
不能。这些颜色函数只生成颜色值，不生成形状、位置或遮罩。你可以用 color-mix(in srgb, black 30%, white) 得到一个中间灰，再喂给 radial-gradient 的起始色，但函数本身不解决“如何让阴影待在框内”这个布局问题。
常见误用是试图这样写：box-shadow: inset 0 4px 8px color-mix(in srgb, black 40%, transparent);——语法合法，但结果和直接写 rgba(0,0,0,0.4) 完全一致，没解决透明背景下的不可见问题。
立即学习“前端免费学习笔记（深入）”；
兼容性与性能提醒
radial-gradient 方案在所有现代浏览器都支持，包括 Safari 15.4+；但 IE 完全不支持，且旧 Android WebView 对 at 位置语法支持不稳定。更隐蔽的问题是：如果元素有 backdrop-filter 或 clip-path，渐变层可能被裁切或模糊失真——这时得把阴影层抽成伪元素，已超出“不增加 HTML 标签”的前提。
真正难的不是写对一行渐变，而是判断当前容器是否已有背景图层、是否启用了混合模式、父级是否有 overflow: hidden——这些都会让内阴影突然消失或错位。
