有什么方法可以独立于高度增加框阴影宽度吗？

Question

box-shadow: 0 0 0 10px; 每边放置5个像素。

我有一个居中的div，它横跨用像这样的box-shadow: 0 0 10px 0;样式设置的视口的高度box-shadow: 0 0 10px 0; 分层错觉，但因为div停在浏览器的顶部和底部，所以阴影的角出现了。 这是不可取的。 我认为，如果我能以某种方式增加阴影的高度（而不是宽度），则可以达到我目前的确切外观，减去弯曲的角。

https://jsfiddle.net/nu4j0htf/

Answer 1

使用伪元素（如:before您可以创建与主要元素不同尺寸的盒子阴影。 但是，我的实现导致需要进行垂直滚动处理。

https://jsfiddle.net/nu4j0htf/1/

body {
 overflow: hidden; /* added */
}

/* removed box-shadow from .backDrop and added this */
.backDrop:before {
  content:'';
 box-shadow: 0 0 20px 0 black;
 position: absolute;
 height: 120vh;
 width: 75vw;
}

如果需要在页面上垂直滚动，则需要考虑其他解决方案。