代码之家 › 专栏 › 技术社区 › tatsu

圆形阴影CSS

radial-gradients shadow css

1

tatsu · 技术社区 · 8 年前

https://www.prowebdesign.ro/round-brush-like-responsive-drop-shadows-with-css3-and-no-images/

.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

1 回复 | 直到 8 年前

1

2

Temani Afif 8 年前

painting order

负位叠加

如果我们稍后检查,我们将看到:

元素,就像它创建了一个新的堆栈一样 应该被认为是父母的一部分 .

.item 而这个有一个 z-index:auto .body 一个叠加上下文,所以我们向上移动。换句话说,在所有元素所属的情况下,我们只有一个堆栈上下文,因为伪元素有一个负的 z-index

z-index:0 到

.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”的患者

因此,伪元素现在将属于由

.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=“tober”>我很困扰</DIV>

在本例中,我们向

.项目

.主体 (伪元素及其阴影)然后我们打印所有

如果我们回到初始代码,您还会注意到第一个元素的阴影被绘制了。 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=“item”>我应该被跟踪,但我也很困扰</DIV>
<DIV class=“item”>阴影我</DIV>

margin-bottom 因此,我们有一个溢出,就像我们最初在第一个溢出时,有一个边缘崩溃。