本文介绍一种巧妙利用 box-shadow 大范围模糊扩散的技巧，在保持容器整体半透明背景（如暗化视频）的同时，让子元素区域“透出原始背景”，从而实现视觉上“撤销 opacity”的效果。
本文介绍一种巧妙利用 box-shadow 大范围模糊扩散的技巧，在保持容器整体半透明背景（如暗化视频）的同时，让子元素区域“透出原始背景”，从而实现视觉上“撤销 opacity”的效果。
在实际 Web 开发中，常遇到这样的需求：整个页面或容器应用了 rgba(0, 0, 0, 0.2) 等半透明遮罩以压暗背景（例如视频、图片），但其中某个透明/镂空区域（如表盘、模态框内容区、HUD 组件）需无损还原底层原始画面——即不能简单设置子元素 background-color: black 或 opacity: 1，因为那会遮盖穿透内容（如视频流）。CSS 并不支持“反向继承”或“局部禁用父级透明度”，但可通过 box-shadow 的超大扩张阴影（spread shadow） 实现等效视觉效果。
其核心原理是：
✅ 将原本作用于 .container 的 rgba() 背景色移至 <body> 或根层（作为真实背景）；
✅ 移除 .container 的透明背景，改用 box-shadow 在 .square 元素上投射一个覆盖全屏、高黑度、零偏移、极大扩张值的阴影；
✅ 此阴影会“填充”容器区域，而 .square 自身保持透明（background: transparent），因此其内部直接显示底层真实背景（如视频），形成“该区域未被暗化”的错觉。
以下是可直接运行的示例代码：
.container {
height: 100vh;
width: 100vw;
display: flex;
justify-content: center;
align-items: center;
/* 移除 background-color: rgba(...) */
/* 真实背景（如视频）应设在 body 或伪元素上 */
background: url('https://images.unsplash.com/photo-1454496522488-7a8e488e8606?auto=format&fit=crop&w=900&q=60') center/cover;
}
.square {
width: 100px;
height: 100px;
border: 1px solid red;
background: transparent; /* 关键：保持透明，让底层可见 */
/* 用 box-shadow 模拟全局暗化层，但避开 .square 区域 */
box-shadow: 0 0 0 50vw rgba(0, 0, 0, 0.8); /* 50vw ≈ 覆盖整个视口 */
}<div class="container"> <div class="square"></div> </div>
⚠️ 注意事项：
- box-shadow 的 spread 值（第四个参数）必须足够大（推荐 50vw 或 100vmax），确保阴影完全覆盖容器外区域，避免边缘漏光；
- .square 不可设置任何不透明背景（包括 background-color、background-image），否则将遮挡底层内容；
- 若容器内有其他非透明子元素，需确保它们不被该阴影意外覆盖（可通过 z-index 分层控制）；
- 此方案兼容所有现代浏览器（Chrome 23+, Firefox 16+, Safari 6.1+），且性能优于 backdrop-filter（后者在部分场景下会触发重绘开销）。
总结：虽然 CSS 没有原生“取消父级透明度”的属性，但借助 box-shadow 的扩张特性，我们能以声明式、高性能的方式模拟出“局部透底”效果——这不仅是 hack，更是对 CSS 渲染模型的创造性运用。
立即学习“前端免费学习笔记（深入）”；
