如何让父元素的inset box-shadow内阴影渲染在子元素背景层上方

当然可以实现，不需要新增真实DOM节点，也可以不用你不喜欢的伪元素方案，以下是两种可行的纯CSS实现思路：

为什么原代码阴影被盖住 #

默认情况下，元素的inset内阴影渲染层级位于容器自身背景上方、容器的所有子内容下方，所以子元素的不透明背景会完全遮挡住内阴影，我们只要调整两者的堆叠顺序即可解决问题。

方案1：调整堆叠层级（推荐，兼容性最好）

完全复用你现有的内阴影代码，仅需新增少量CSS即可：

.container1 {
  box-shadow: inset 0 0 30px red;
  width: min-content;
  /* 新增代码 */
  position: relative;
  /* 创建独立堆叠上下文，避免子元素层级影响外部元素 */
  isolation: isolate;
  /* 避免容器拦截子元素的点击、hover等交互事件 */
  pointer-events: none;
}

/* 仅作用于container1的直接子元素，不会污染其他元素 */
.container1 > * {
  position: relative;
  z-index: -1;
  /* 恢复子元素的交互能力 */
  pointer-events: auto;
}

该方案兼容IE9及以上所有现代浏览器，不需要调整原有的内阴影参数，子元素包括图片、视频等任意类型都可以生效。

方案2：多重背景模拟内阴影（不需要修改子元素样式）

如果不想改动任何子元素的CSS，可以将内阴影效果改为容器的顶层背景层实现：

.container1 {
  width: min-content;
  /* 移除原有的box-shadow属性，改用背景模拟内阴影 */
  background: 
    /* 最上层模拟30px红色内阴影，参数可根据需求调整 */
    radial-gradient(farthest-side, transparent calc(100% - 30px), rgba(255, 0, 0, 0.8) 100%),
    /* 下层保留容器原本的背景色，无默认背景写transparent即可 */
    transparent;
}

该方案的优势是不需要对子元素做任何设置，缺点是复杂的多偏移、多色值内阴影模拟成本略高于直接使用box-shadow。

内容的提问来源于stack exchange，提问作者olegzhermal