怎样才能让div盒阴影完全向右而下，与顶部清晰？

Question

框影:0 0 0 shadow(0，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之间获得最大值，所以只需使用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/