如何使div框阴影在顶部和底部完全左右移动？

Question

box-shadow：0 0 0 10000px rgba（0,0,0,0.65）;

如果将此框阴影CSS应用于DIV，则div将仅在页面上可见，而其他内容将处于阴影之下。 是否有可能仅将框阴影设置为100％或完全移到右侧和底部，而根本不移到上方或顶部？

Answer 1

像这样：

 .box { margin:100px auto; width:200px; height:200px; border:2px solid green; background:red; box-shadow:1000px 1000px 0 1000px #000; } 

 <div class="box"></div> 

或者在左侧这样：

 .box { margin:100px auto; width:200px; height:200px; border:2px solid green; background:red; box-shadow:-1000px 1000px 0 1000px #000; } 

 <div class="box"></div> 

为了确保始终覆盖整个屏幕，最好考虑使用vh vw装置。 由于我们无法获得100vh或100vw之间的最大值， 100vw只需使用100vh + 100vw

 .box { margin:100px auto; width:200px; height:200px; border:2px solid green; background:red; box-shadow:calc(100vh + 100vw) calc(100vh + 100vw) 0 calc(100vh + 100vw) #000; } 

 <div class="box"></div> 

对于左边：

 .box { margin:100px auto; width:200px; height:200px; border:2px solid green; background:red; box-shadow:calc(-1 * (100vh + 100vw)) calc(100vh + 100vw) 0 calc(100vh + 100vw) #000; } 

 <div class="box"></div> 

Answer 2

 div { width: 100px; height: 100px; background-color: yellow; box-shadow: 100px 100px 0 100px rgba(0,0,0,1); } 

 <p> lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem </p> <div></div> 

Answer 3

从这里以及复制后，根据自己的喜好对其进行样式设置；）

https://www.cssmatic.com/box-shadow

要么

https://css3gen.com/box-shadow/