有没有办法从高度独立地增加盒子阴影宽度？

Question

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

我有一个居中的div，它跨越视图端口的高度，使用像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;
}

如果您需要在页面上进行垂直滚动，则需要考虑不同的解决方案。