javascript - 创建双盒阴影效果(如两个聚光灯)

Question

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

代码和 fiddle :

<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轴y轴淡出增长色

• inset:反转阴影的逻辑，生长到元素中而不是元素之外。
• x 轴:距离阴影将水平平移。
• y 轴:距离阴影将垂直平移。
• 淡出:阴影颜色变为完全透明所需的距离。
• grow:box-shadow 以与框相同的大小开始，给定值在所有方向增加初始大小。
• color:可以接受颜色名称、十六进制代码、rgb、hsl、hsla 或更好的 rgba (红色、绿色、蓝色、alpha)。
• 插入、淡出、淡出和增长 是可选的。

您可以向同一元素添加多个阴影，并用逗号 将它们分隔开。

如您在以下代码片段中所见。

.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>