应用CSS文本阴影时，可以将多个元素视为一个文本吗? [英] Is it possible to treat multiple elements as one text when applying CSS text-shadow?

问题描述

将CSS text-shadow 应用于文本内容部分包裹在子元素中的元素时，包裹的文本后的字母会在包裹的元素上产生阴影，如您所见这个例子:

When applying CSS text-shadow to an element that has its text content partially wrapped in child elements, the letters after the wrapped text will throw a shadow on the wrapped elements, as you can see in this example:

* {
  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)似乎也破坏了多行文本以进行渲染，因此新行将在之前的行上添加阴影，但这在这里并没有那么麻烦.但是，我希望文本的所有字符都位于同一层.

The first "t" of "text" and the "c" of "consists" appear darker than the rest of the text due to this. The rendering engines (testet FF and Chrome latest) also seem to break up multiline text for rendering, so a new line will throw a shadow on the line before, but that's not even bothering that much here. However, I would like to have all characters of the text to be regarded as being on the same layer.

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

Is there some trick you can apply to the CSS to make the rendering behave that way?

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

I played around with z-index and wrapping all text nodes in child elements of the .shadow container, but to no avail.

推荐答案

您可以考虑使用 drop-shadow()过滤器，但要注意，因为它与text-shadow的作用不同.过滤器是累积的，不能单独应用:

You can consider drop-shadow() filter but pay attention as it doesn't work the same as text-shadow. Filter are cumulated and not applied seperately:

* {
  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()过滤器的效果，

To better illustrate the effect of multiple drop-shadow() filter:

.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>

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

You can clearly see how many shadows we have in the second example because each time we consider the previous and we duplicate it.

这篇关于应用CSS文本阴影时，可以将多个元素视为一个文本吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！