CSS text color

Question

Is it possible for the text-shadow property to inherit color? For example, it is possible:

text-shadow: 1px 2px inherit;

I know this will not work, but if there is another way, please show me.

Answer 1

You can try currentcolor:

The keyword currentcoloris the computed value of the color element . This allows you to make color properties inherited by properties or properties of child elements that do not inherit it by default.

p {
  text-shadow: 1px 2px currentcolor;
}

<p style="color: red">Red</p>
<p style="color: green">Green</p>
<p style="color: blue">Blue</p>

Run codeHide result

Answer 2

, , css. . :

.text-red p{
  text-shadow: 1px 1px red;
}
.text-green p {
  text-shadow: 1px 1px green;
}
.text-blue p {
  text-shadow: 1px 1px blue;
}

HTML

<div class="text-blue">
<p>
     My shadowed text
</p>
</div>

: https://jsfiddle.net/pzvuw07g/1/
. , !

Answer 3

In fact, you only need to set the shadow properties, the color of the shadow text, for example box-shadow, outlineor borderinherits the color used by the text, which is really the currentcolordefault :)

p {
  text-shadow: 1px 2px ;
  outline: solid;
  outline-offset: 5px;
  border:solid;
  box-shadow:0 0 5px;
}

<p style="color: red">Red</p>
<p style="color: green">Green</p>
<p style="color: blue">Blue</p>

Run codeHide result