基于box-shadow的可开合窗口效果实现遇阻，求解决方案

哈哈，这个坑我之前也踩过！box-shadow根本没法用来做遮罩覆盖内容——它本质是元素的投影效果，属于元素的背景堆叠层，优先级比内部的文本、图片这些内容低，永远会被压在下面，自然没法实现你要的“隐藏内容”效果。

别慌，给你几个靠谱的替代方案，都能轻松达成你想要的“窗口遮罩+悬停/点击显示内容”的效果：

方案1：用伪元素模拟遮罩（最推荐，无额外DOM） #

不用box-shadow，而是给容器加一个::before伪元素作为遮罩层，让它覆盖在内容上方，悬停时通过动画移开或隐藏它。还能给伪元素加box-shadow: inset来模拟窗口边框的质感，完美替代你原本的想法。

示例代码：

body {
  background: #20262E; /* 和你原来的背景色一致 */
}

.container {
  position: relative;
  width: 300px;
  height: 200px;
  margin: 20px;
  overflow: hidden; /* 防止内容溢出 */
}

/* 遮罩层：覆盖在内容上方 */
.container::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #20262E; /* 和页面背景色统一，实现“隐藏”效果 */
  box-shadow: inset 0 0 0 2px #fff; /* 模拟窗口边框 */
  transition: all 0.3s ease;
}

/* 悬停时移开遮罩（这里用向下滑出，你也可以改成向左/向右/淡入淡出） */
.container:hover::before {
  transform: translateY(100%);
}

/* 容器内的内容 */
.container .content {
  padding: 20px;
  color: #fff;
}

方案2：用额外遮罩容器（适合复杂交互） #

如果不想用伪元素，可以单独加一个div作为遮罩层，逻辑和伪元素一致，悬停时控制它的位置或透明度。这种方式适合需要给遮罩加更多交互逻辑的场景。

示例代码：

<div class="container">
  <div class="content">这里是要隐藏的文本或图片内容</div>
  <div class="mask"></div>
</div>

body {
  background: #20262E;
}

.container {
  position: relative;
  width: 300px;
  height: 200px;
  margin: 20px;
  overflow: hidden;
}

.content {
  padding: 20px;
  color: #fff;
}

.mask {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #20262E;
  box-shadow: inset 0 0 0 2px #fff;
  transition: transform 0.3s ease;
}

/* 点击时触发（可以配合JS加active类） */
.container.clicked .mask,
.container:hover .mask {
  transform: translateX(-100%); /* 向左滑出 */
}

方案3：用clip-path实现裁剪式窗口 #

如果你的需求是“初始只有小窗口显示内容，悬停时展开显示全部”，可以用clip-path来裁剪元素，悬停时修改裁剪路径即可，动画也很丝滑。

示例代码：

body {
  background: #20262E;
}

.container {
  width: 300px;
  height: 200px;
  margin: 20px;
  background: #20262E;
  border: 2px solid #fff;
  clip-path: inset(0 0 90% 0); /* 初始只显示顶部10%区域 */
  transition: clip-path 0.4s ease;
}

.container:hover {
  clip-path: inset(0 0 0 0); /* 展开显示全部内容 */
}

.content {
  padding: 20px;
  color: #fff;
}

方案4：transform + overflow:hidden（极简实现） #

把内容放在容器里，初始时用transform将内容移出容器可视区域，容器设置overflow:hidden，悬停时把内容移回来。这种方式代码最少，适合简单的滑入效果。

示例代码：

body {
  background: #20262E;
}

.container {
  width: 300px;
  height: 200px;
  margin: 20px;
  overflow: hidden;
  border: 2px solid #fff;
  background: #20262E;
}

.content {
  transform: translateY(100%); /* 初始向下移出容器 */
  transition: transform 0.3s ease;
  padding: 20px;
  color: #fff;
}

.container:hover .content {
  transform: translateY(0); /* 移回显示 */
}

总结 #

box-shadow确实没法用来覆盖内容，因为它的层级天然在内容之下。上面的几个方案里，伪元素的方式最简洁，不用额外添加DOM元素，推荐优先尝试。如果需要更复杂的动画或交互，clip-path或遮罩容器的方式也能满足你的需求。

内容的提问来源于stack exchange，提问作者Jos van Weesel