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

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/

我希望单词 "spotlight" 和页面其余部分都有类似的阴影。

作为奖励，我很想知道如何制作这些聚光灯效果 'fade in'。

谢谢！

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 (red, green, blue, 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>

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

creating dual box-shadow effect (like two spotlights)

javascript

css

box-shadow