創建雙箱陰影效果（如兩個聚光燈）

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>