内阴影不能直接用 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 的起始色，但函数本身不解决“如何让阴影待在框内”这个布局问题。

Article To Html

文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。

下载

常见误用是试图这样写：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——这些都会让内阴影突然消失或错位。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！