Is it possible to treat multiple elements as one text when applying 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>

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.

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

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

回答1:

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>

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.

回答2:

You can use the drop-shadow() filter.

Demo:

* {
  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>

来源：https://stackoverflow.com/questions/59016227/is-it-possible-to-treat-multiple-elements-as-one-text-when-applying-css-text-sha

标签

html

css

html-rendering