如何让 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>

为了确保您始终更好地覆盖整个屏幕vhvw请考虑该单元。由于我们不能在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/