应用 CSS text-shadow 时是否可以将多个元素视为一个文本？

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 text-shadow 时是否可以将多个元素视为一个文本？

Is it possible to treat multiple elements as one text when applying CSS text-shadow?

html

css

html-rendering