Html 如何添加阴影'；翅膀'；到中心的内容div

我有一个用于练习JavaScript的脚本，但最近我发现我的一些CSS阻止了我的文档侦听器听到鼠标点击的声音，而不是指向罪魁祸首CSS之外的嵌入元素

罪魁祸首

.background{
背景色：#FFF；
高度：100vh；宽度：720px；
保证金：自动；
/*长方体阴影：创建不理想的角点*/
}
.背景：之前{
长方体阴影：0 0 20px-20px黑色；/*收缩和模糊以形成柔和的阴影*/
内容：''；
高度：200vh；
position:absolute；/*您尝试的第一个解决方案的问题与伪元素的位置有关。因为它有
position:absolute
它位于其他元素之上，导致了问题

通过使用
z-index
，您可以很容易地解决这个问题：如果您将
z-index
的值设置为-1，该元素将进入堆栈底部，并且不会影响事件侦听器

下面是使用您的代码进行的演示：


var-element=document.getElementById（“addItem”）；
元素。addEventListener（'click'，promptFunction）；
函数提示函数（）{
element.innerHTML=square（window.prompt（'inputvar'）；
}
函数平方（x）{
返回x*x；
}
正文{
背景色：#3A3C3D；/*alt color#CCA#3A3C3D*/
保证金：0；
溢出：隐藏；/*顶部阻止扩展阴影元素高度导致页面滚动*/
}
.背景{
背景色：#FFF；
高度：100vh；宽度：720px；
保证金：自动；
/*长方体阴影：创建不理想的角点*/
}
.背景：之前{
长方体阴影：0 0 20px黑色；/*缩小并模糊，形成柔和阴影*/
内容：''；
高度：200vh；
职位：绝对；/*我发现很难理解你的目标（问题中有太多噪音）.你是在尝试添加背景吗？你是在尝试将事件侦听器添加到更大的框中吗？问题：第一部分我希望我的页面看起来像这样，并且仍然允许事件侦听器听到针对嵌入x层的元素的鼠标单击，这就是为什么我不能依赖伪元素来创建框阴影，因为显然……而且很荒谬y、 …他们…阻止JavaScript。我知道，这也让我大吃一惊。因此，为了保持我页面的功能，我必须牺牲或折衷美学。折衷的办法之一是对实际元素应用框阴影，而不是使用伪元素，但这种方法会创建圆形阴影角。问题：第二部分，其余部分介绍了当时，我试图在不使用CSS的情况下实现这种美感。也就是说，我为我的阴影图像创建了两个专用的div，它们位于
背景
的两侧，并将它们全部封装在一个
包装器
div
中，使嵌入的三个div紧紧地靠在一起（需要我用注释标记将html弄乱）以页面的上下文为中心。我已经加入了一些图片，显示我离实现这一点有多近。文章中的最后四个链接应该有助于消除任何遗留的混乱。我以前读过关于z-index的内容，但我发现很难理解DIV和html上下文中的抽象。有没有一个工具可以分析和报告html文档中的完整z索引包含多个元素，这样我就可以感觉到所有内容的位置以及如何到达那里？