当文本颜色较暗时，如何做明亮的文本阴影等方法

Question

我有一个来自API的带有自动颜色的文本，我想设置"；相反的"；颜色，例如，如果文本为白色，则文本阴影应较深(黑色或深灰色(。如果可能的话，用css。

<div class="box_content">
<a href="#">
<p class="chara_name">Apple</p>
</a>
</div>

.chara_name {
color: #fffce9;
text-shadow: 2px 0 0 #fff, -2px 0 0 #fff, 0 2px 0 #fff, 0 -2px 0 #fff, 1px 1px #fff, -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff;
/* here i want my text-shadow color to be darker if color is light and the other way around */
}

Answer 1

如果您也可以将文本放入attribute中，则可以使用伪元素，反转颜色并将其放在后面。

.chara_name {
color: #fffce9;
}
.chara_name:before {
content: attr(content-data);
position: absolute;
filter: invert(1);
text-shadow: 2px 0 0 currentColor, -2px 0 0 currentColor, 0 2px 0 currentColor, 0 -2px 0 currentColor, 1px 1px currentColor, -1px -1px 0 currentColor, 1px -1px 0 currentColor, -1px 1px 0 currentColor;
z-index: -1;
}

<div class="box_content">
<a href="#">
<p class="chara_name" content-data="Apple">Apple</p>
</a>
</div>

但你仍然会有灰色的问题，因为灰色反转仍然是灰色。