Html 隐藏可见性时保持长方体阴影

我试图隐藏一个元素，但使其阴影可见。 例如：

// html
<div id="c1" class="cont"></div>
<div id="c2" class="cont"></div>

（）

我希望

c2

被隐藏（背景不应该是可见的），但阴影应该是可见的。
现在您可以看到

c1

---

我可以将每个这样的div包装在另一个容器中，并在容器上有阴影的情况下隐藏内部div，但我想知道如果没有它，是否有可能实现这一点。

您可以通过放弃

可见性：hidden。如果淡出背景，并从元素中删除
指针事件
，则应该会产生相同的效果


正文{
背景色：#ffffff；
}
续{
宽度：150px；
高度：150像素；
利润率：30px 15px；
盒影：0px 10px 22px#808aa8；
背景色：#c2cff2；
}
#c2{
颜色：透明；
背景色：透明；
指针事件：无；
}
#c2>*{
显示：无；
}

你好
你好
使用伪元素


HTML

<div id="c1" class="cont"></div>

所讨论的元素中有内容（例如图像），它不仅仅是背景，我在示例中选择背景只是为了简化事情。在这种情况下有没有类似的方法？哦，我明白了！我已经用一个可能的解决方案更新了答案，但感觉有点不对劲..我用过，我不喜欢这个，但我在这上面浪费了足够的时间。谢谢，我知道那种感觉！很高兴我能帮上忙，kindaThis似乎是一个很好的解决方案，但我无法让它在我的代码中工作。无论我做了什么，
：after
部分都不可见。我的代码要复杂得多，包括定位，不清楚是什么破坏了它。
<div id="c1" class="cont"></div>

 html, body {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
}

body {
  background-color: red;
}

.cont {
  width: 150px;
  height: 150px;
  margin: 30px 15px;
  background-color: rgba(0,0,0,0)
}
.cont:after {
  content: "";
  display: block;
  width: 150px;
  height: 150px;
  box-shadow: 0px 10px 22px blue;

}