当我嵌套文本阴影时，如何继承阴影的颜色？

Question

我在文本上应用了这种阴影效果。

span.inner_text {
  text-shadow: 5px 5px 5px red;
}

<span class="inner_text">It's a simple text</span>

---

第一季度。 我们将text-shadow用作父元素，因为我们需要为此添加阴影。然后，父元素text-shadow无法正常工作。为什么是这样？以及如何嵌套阴影？

p {
  text-shadow: 15px 15px 15px blue; /* blue shadow disappeared */
}

span.inner_text {
  text-shadow: 12px 12px 5px red;
}

<p>
  <span class="inner_text">It's a simple text</span>
</p>

---

第二季度。

接下来，我将drop-shadow用作父元素。然后p元素的阴影消失了。为什么是这样？以及如何嵌套阴影？

div {
  filter: drop-shadow(30px 10px blue);
}

p.inner_text {
  text-shadow: 5px 5px 5px red; /* red shadow disappeared */
}

<div>
  <span class="inner_text">It's a simple text</span>
</div>

Answer 1

对于 Q1 ，在p内添加一些文字，您会更好地理解

p {
  text-shadow: 15px 15px 15px blue; /* blue shadow disappeared */
}

span.inner_text {
  text-shadow: 12px 12px 5px red;
}

<p>
  <span class="inner_text">It's a simple text</span> some text here
</p>

蓝色阴影适用于p内的文本，但对于跨度内的文本，我们考虑跨度的阴影。

其行为与color完全相同。仅使用一个 text-shadow。

p {
  color:blue;
}

span.inner_text {
  color:red;
}

<p>
  <span class="inner_text">It's a simple text</span> some text here
</p>

如果要多个阴影，则它们需要属于父元素或子元素的同一属性，因为它是继承的属性。只需注意顺序（阴影效果从前到后应用：第一个阴影在顶部）

p {
  text-shadow: 
    15px 15px 15px blue,
    12px 12px 5px red; 
}

span.inner_text {
 
}

<p>
  <span class="inner_text">It's a simple text</span>
</p>

---

对于第2季度，您只需输入一个错字，因为您没有p元素，而您正在定位p元素：

div {
  filter: drop-shadow(30px 10px blue);
}

p.inner_text {
  text-shadow: 5px 5px 5px red; 
}

<div>
  <p class="inner_text">It's a simple text</p>
</div>

Answer 2

尝试一下

CSS

span.inner_text {
  text-shadow: 12px 12px 5px inherit;
}

使用CSS inherit属性值继承父色的属性。