如何在设置visibility:hidden时保留元素的box-shadow

这个问题很有意思！要实现隐藏元素本身但保留box-shadow，核心在于区分元素自身的可见性和阴影的渲染逻辑——visibility: hidden会把元素的所有视觉表现（包括阴影）都隐藏，所以得换个思路，下面给你几个可行的方案：

方案一：清空元素视觉内容，保留阴影载体 #

直接修改目标元素的样式，把它的背景、尺寸清空，但保留阴影的“载体”属性：

#c2 {
  /* 去掉背景色，让元素本身无视觉内容 */
  background-color: transparent;
  /* 将元素尺寸缩为0，避免占据额外空间（不需要保留占位时可用） */
  width: 0;
  height: 0;
  /* 保持原有的外边距，让阴影位置和c1一致 */
  margin: 30px 15px;
}

原理：box-shadow是基于元素的盒模型生成的，即使元素宽高为0，只要设置了box-shadow，它依然会按照原有参数渲染出来，而我们把背景清空后，元素本身就看不到了。

方案二：用伪元素单独承载阴影 #

如果需要保留元素的占位空间，或者不想修改原元素的尺寸，可以用伪元素来单独生成阴影，再隐藏原元素：

#c2 {
  visibility: hidden;
  position: relative;
}
#c2::after {
  content: '';
  /* 伪元素定位到原元素的位置 */
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* 复制原有的阴影样式 */
  box-shadow: 0px 10px 22px #808aa8;
  /* 让伪元素不受父元素visibility:hidden的影响 */
  visibility: visible;
}

原理：visibility: hidden的元素，其伪元素默认会继承隐藏状态，但我们可以单独给伪元素设置visibility: visible，这样原元素隐藏，伪元素的阴影却能正常显示。

方案三：保留元素占位，仅隐藏视觉内容 #

如果需要元素继续占据页面空间，只是看不到背景和内容，可以这样设置：

#c2 {
  background-color: transparent;
  /* 如果元素有文字或边框，也一并隐藏 */
  color: transparent;
  border: none;
}

这种方案最简单，元素依然保留原有的尺寸和占位，只是自身的视觉内容消失，阴影不受影响。

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