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/

我希望在这两个词上有一个亮点＆＃34;聚光灯＆＃34;和页面其余部分的类似阴影。

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

谢谢！

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>

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

1 个答案: