Question

将CSS text-shadow应用到文本内容部分包裹在子元素中的元素时，包裹文本后的字母将在包裹的元素上产生阴影，如本例所示：

* {
  font-family: sans-serif;
  font-weight: 900;
}

.shadow {
  color: #ffd9e2;
  font-size: 3rem;
  text-shadow: 0 0 0 transparent, 0 0 10px #ff003c, 0 0 20px rgba(255, 0, 60, 0.5), 0 0 40px #ff003c, 0 0 100px #ff003c, 0 0 200px #ff003c, 0 0 300px #ff003c, 0 0 500px #ff003c, 0 0 1000px #ff003c;
}

hr {
  margin: 2em 0;
}

<span class="shadow">This <span>t</span>ext <span>c</span>onsists of multiple elements</span>
<hr>
<span class="shadow">This text consists of one single element</span>

因此，“ text”的第一个“ t”和“ consists”的“ c”显得比其余文本更暗。渲染引擎（最新的testet FF和Chrome）似乎也破坏了多行文本以进行渲染，因此新行将在之前的行上产生阴影，但这在这里并没有那么麻烦。但是，我希望文本的所有字符都位于同一层。

您是否可以将一些技巧应用于CSS，以使渲染方式如此？

我玩过z-index并将所有文本节点包装在.shadow容器的子元素中，但无济于事。

Answer 1

您可以使用drop-shadow()过滤器。

演示：

* {
  font-family: sans-serif;
  font-weight: 900;
}

.shadow {
  color: #ffd9e2;
  font-size: 3rem;
  filter: drop-shadow(0 0 0 transparent)
          drop-shadow(0 0 10px #ff003c) 
          drop-shadow(0 0 20px rgba(255, 0, 60, 0.5));
}

hr {
  margin: 2em 0;
}

<span class="shadow">This <span>t</span>ext <span>c</span>onsists of multiple elements</span>
<hr>
<span class="shadow">This text consists of one single element</span>

Answer 2

您可以考虑使用drop-shadow()过滤器，但请注意，因为它与文本阴影不同。过滤器是累积的，不能单独应用：

* {
  font-family: sans-serif;
  font-weight: 900;
}

.shadow {
  color: #ffd9e2;
  font-size: 3rem;
 filter:
  drop-shadow(0 0 10px #ff003c)
  drop-shadow(0 0 20px rgba(255, 0, 60, 0.5))
  drop-shadow(0 0 40px #ff003c);
}

hr {
  margin: 2em 0;
}

<span class="shadow">This <span>t</span>ext <span>c</span>onsists of multiple elements</span>
<hr>
<span class="shadow">This text consists of one single element</span>

为了更好地说明多个drop-shadow()过滤器的效果，

.box {
  padding:50px;
  font-size:30px;
  font-weight:bold;
}
.s {
 text-shadow: 20px 50px 0 red,150px -20px 0 blue,-20px 20px 0 green;
}

.f {
 filter: drop-shadow(20px 50px 0 red) drop-shadow(150px -20px 0 blue) drop-shadow(-20px 20px 0 green);
}

<div class="box s">some shadow</div>

<div class="box f">some filter</div>

您可以清楚地看到第二个示例中有多少阴影，因为每次我们考虑前一个阴影并进行复制。

应用CSS文本阴影时是否可以将多个元素视为一个文本？

2 个答案: