css - 如何让 div 框阴影在顶部清晰的情况下完全向右和向下移动？

Question

盒子阴影:0 0 0 10000px rgba(0,0,0,0.65);

如果这个 box-shadow 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>