如何让inset box-shadow覆盖带背景色的#content div？

嘿，这个问题我碰到过好多次了——当你给#content加上背景色后，它会直接把容器#container的内阴影给盖住，这是因为CSS的内阴影是绘制在容器的背景层和内容层之间的，一旦内容层有不透明的背景，阴影自然就被挡住了。

下面给你几个实用的解决方案，按场景选就行：

方法一：用伪元素模拟顶层内阴影（最推荐，效果最还原） #

这个方法的核心是给容器加一个伪元素，把内阴影放在这个伪元素上，让它覆盖在#content的上方，这样阴影就能“盖”在带背景色的内容上了：

#container {
  position: relative;
  /* 保留你原来的容器样式，但要去掉里面的inset box-shadow */
}

#container::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  /* 原来的内阴影样式直接搬过来 */
  -webkit-box-shadow: inset 0px 0px 21px 5px rgba(0, 0, 0, 0.55);
  -moz-box-shadow: inset 0px 0px 21px 5px rgba(0, 0, 0, 0.55);
  box-shadow: inset 0px 0px 21px 5px rgba(0, 0, 0, 0.55);
  pointer-events: none; /* 关键：让伪元素不干扰内容的点击、输入等交互 */
  z-index: 1; /* 确保伪元素在#content的上方 */
}

#content {
  position: relative;
  z-index: 0; /* 让内容层在伪元素下面 */
  background-color: #ffffff; /* 你的背景色 */
}

方法二：用CSS渐变模拟内阴影（轻量但可控性弱） #

如果你的阴影效果不需要太精细，可以用CSS渐变来模拟，把渐变和背景色组合在一起：

#content {
  background-color: #ffffff;
  /* 用径向渐变模拟中心向外的内阴影，参数可以自己调 */
  background-image: radial-gradient(circle at center, rgba(0,0,0,0.55) 0%, transparent 70%);
  background-blend-mode: overlay; /* 让渐变阴影和背景色融合 */
}

这种方法不用额外加元素，但阴影的形状和模糊度不如box-shadow灵活。

方法三：给父容器加padding，让阴影显示在内容边缘 #

如果你的需求是阴影在内容的四周，而不是覆盖整个内容表面，可以给#container加padding，让#content不填满容器，这样内阴影就会显示在内容和容器边缘之间：

#container {
  -webkit-box-shadow: inset 0px 0px 21px 5px rgba(0, 0, 0, 0.55);
  -moz-box-shadow: inset 0px 0px 21px 5px rgba(0, 0, 0, 0.55);
  box-shadow: inset 0px 0px 21px 5px rgba(0, 0, 0, 0.55);
  padding: 20px; /* 给阴影留出足够的显示空间 */
}

#content {
  background-color: #ffffff;
  /* 不需要额外的层级设置，内容在容器的padding区域内，阴影自然显示在四周 */
}

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