创建双箱阴影效果（如两个聚光灯）

Question

我想创建一个双箱阴影效果，就像一个页面上的两个聚光灯。

代码和小提琴：

<style> 
.greenbox1{ 
    position: relative; 
    height: 100px; 
    width: 100px; 
    margin-left: 100px; 
    text-align:center; 
    background-color:#00aa00; 
    float:left; 
} 
.greenbox2{ 
    position: relative; 
    height: 100px; 
    width: 100px; 
    text-align:center; 
    margin-right: 100px; 
    background-color:#00aa00; 
    float:right; 
} 

.spotlightme{ 
    box-shadow: 0 0 0 1000px rgba(0, 0, 0,.4); 
    position: relative; 
    z-index: 99; 
    border-radius:10px; 
    padding: 10px; 
} 
</style> 
<div class="greenbox greenbox1"> 
    <span class="spotlightme">spotlight</span> 
</div> 
<div class="greenbox greenbox2"> 
    <span class="spotlightme">spotlight</span> 
</div> 

在此的jsfiddle，都是太阴暗：https://jsfiddle.net/7htp62h1/6/

而在这其中，只有一个具有正确的聚光灯： https://jsfiddle.net/7htp62h1/8/

我会就像在那里，在页面的其余部分上都会有“聚光灯”和类似的阴影。

作为奖励，我很想知道如何让这些聚光灯效果“淡入”。

谢谢！

Answer 1

不知道我理解你的问题。 但我已经玩了一下fiddle here。

任何如何， 这是box-shadow是如何工作的：

box-shadow: inset x-axis y-axis fade-out grow color

• inset：反转阴影的逻辑，成长为元素，而不是出了元素。
• x-axis：距离阴影将水平平移。
• y-axis：距离影将垂直翻译。
• fade-out：它将使阴影颜色变得完全透明。
• grow：box-shadow以与框大小相同的大小开始，给定值会增加所有方向的初始大小。
• color：可以取颜色名称，十六进制码，rgb，hsl，hsla甚至更好rgba （红色，绿色，蓝色，alpha）。
• inset, fade-out, fade-out & grow是可选的。

您可以添加多重阴影相同的元素，并将它们与逗号分隔。

正如你在下面的代码片段中看到的。

.box { 
 
    background-color: #888; 
 
    margin: 20vh 40vw; 
 
    width: 20vw; 
 
    height: 25vh; 
 
    box-shadow: 20px 20px 10px 0 rgba(0,0,255,0.5), -20px 20px 10px 0 rgba(255,0,0,0.5), inset 0 -10px 30px 5px rgba(255,255,255,0.8); 
 
} 
 

 
.black { 
 
    width: 100vw; 
 
    height: 100vh; 
 
    background-color: #000; 
 
    position: absolute; 
 
    top: 0; 
 
}

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