Question

我发现了以下内容：https://www.prowebdesign.ro/round-brush-like-responsive-drop-shadows-with-css3-and-no-images/

这看起来很棒：完整的CSS和动态的径向阴影！

太好了。只有我不能复制连续项目：

.body{
  background: white;
}

.bother{
  width: 500px;
  background: lightgre;
  margin-left:50px;
}
.item{
  margin-top: 20px;
  margin-left:50px;
  background: grey;
  width: 500px;
  position: relative;
}
.item:after{
  content: "";
    position: absolute;
    z-index: -1;
    box-shadow: 0 0 40px red;
    bottom: 0;
    width: 100%;
    height: 50%;
    left: 0;
    border-radius: 100%;
}

<div class="body">
  <div class="item">shadow me</div>
  <div class="item">I should be shadowed but I'm also bothering</div>
  <div class="bother">I'm bothering</div>
  <div class="item">shadow me</div>
</div>

https://codepen.io/anon/pen/zLxNoE

我想念什么？

Answer 1

首先，body元素具有白色背景，而您的元素的伪元素中则有阴影。让我们考虑painting order，我们将看到白色背景画在您的阴影上方：

堆叠上下文背景和大多数负定位堆叠 上下文位于堆栈的底部，而最积极的定位的堆栈上下文位于堆栈的顶部。

如果我们稍后再检查，将会看到以下内容：

“ z-index：auto”，将该元素视为已创建新的堆叠 上下文，但实际上是所有已定位的后代和后代 创建新的堆叠上下文应被视为父级的一部分 堆叠环境，而不是这个新环境。

您的伪元素位于.item的后代中，并且该伪元素具有z-index:auto，因此它们属于父元素.body的堆叠上下文，而该元素是不创建堆栈上下文，因此我们向上移动。换句话说，在这种情况下，所有元素都属于一个堆叠上下文，并且由于伪元素具有负z-index，因此将首先考虑绘制顺序将它们打印出来。

为避免这种情况，我们需要处理堆栈上下文。例如，我们可以将z-index:0添加到.item

.body{
  background: white;
}

.bother{
  width: 500px;
  background: lightgre;
  margin-left:50px;
}
.item{
  margin-top: 20px;
  margin-left:50px;
  background: grey;
  width: 500px;
  position: relative;
  z-index:0;
}
.item:after{
  content: "";
    position: absolute;
    z-index: -1;
    box-shadow: 0 0 40px red;
    bottom: 0;
    width: 100%;
    height: 50%;
    left: 0;
    border-radius: 100%;
}

<div class="body">
  <div class="item">shadow me</div>
  <div class="item">I should be shadowed but I'm also bothering</div>
  <div class="bother">I'm bothering</div>
  <div class="item">shadow me</div>
</div>

如果我们引用相同的规范，将会看到：

对于“ z-index：0”的用户，请生成的堆栈上下文 原子上。

因此，伪元素现在将属于.item创建的堆栈上下文，并将被打印在.body背景的上方。

我们还可以对.body应用一些样式，以创建另一个堆叠上下文：

.body{
  background: white;
  transform:translate(0)
}

.bother{
  width: 500px;
  background: lightgre;
  margin-left:50px;
}
.item{
  margin-top: 20px;
  margin-left:50px;
  background: grey;
  width: 500px;
  position: relative;
}
.item:after{
  content: "";
    position: absolute;
    z-index: -1;
    box-shadow: 0 0 40px red;
    bottom: 0;
    width: 100%;
    height: 50%;
    left: 0;
    border-radius: 100%;
}

<div class="body">
  <div class="item">shadow me</div>
  <div class="item">I should be shadowed but I'm also bothering</div>
  <div class="bother">I'm bothering</div>
  <div class="item">shadow me</div>
</div>

在这种情况下，我们向.body添加了一个转换，因此该转换将创建一个新的堆叠上下文，并且伪元素将属于该堆叠上下文；因此阴影也将被打印在白色背景上方。

您还将注意到两种情况之间的明显区别。在第一种情况下，元素的阴影与上一个元素重叠，并且阴影在灰色背景BUT上方打印，而不是在第二种情况下。再次是绘画顺序！

对于第一种情况，伪元素属于.item的堆叠上下文，因此顺序为：打印第一个.item及其所有后代，然后打印第二个，依此类推。然后在.item内部，我们首先打印背景，然后考虑其后代（伪元素及其阴影）。

对于第二种情况，伪元素属于.body的堆叠上下文，因此在其中我们首先打印白色背景，然后打印所有负数z-index（伪元素及其阴影），然后打印所有.item。

如果我们回到初始代码，您还会注意到第一个元素的阴影已正确绘制，但考虑到上面的解释，就不应如此。这是因为您面临着使页边空白的问题，导致第一个元素的margin-top移到.body，因此第一个元素的阴影溢出了仍然绘制在其上方的.body。

如果您在.body上添加一个小的填充，阴影将消失，因为margin-top将保留在顶部元素上，而白色背景将隐藏阴影，因为它将覆盖{ {1}}

margin-top

.body{
  background: white;
  padding:1px;
}

.bother{
  width: 500px;
  background: lightgre;
  margin-left:50px;
}
.item{
  margin-top: 20px;
  margin-left:50px;
  background: grey;
  width: 500px;
  position: relative;
}
.item:after{
  content: "";
    position: absolute;
    z-index: -1;
    box-shadow: 0 0 40px red;
    bottom: 0;
    width: 100%;
    height: 50%;
    left: 0;
    border-radius: 100%;
}

现在只有底部阴影是可见的，因为我们没有<div class="body"> <div class="item">shadow me</div> <div class="item">I should be shadowed but I'm also bothering</div> <div class="bother">I'm bothering</div> <div class="item">shadow me</div> </div>，因此发生了溢出，就像最初出现第一个边缘溢出时的情况一样。

圆形阴影CSS

1 个答案: