当文本颜色较暗或其他方式时，如何做一个明亮的文本阴影？

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，您可以使用 pseudo-element，反转颜色并将其放在后面。

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

但是灰色还是会有问题，因为灰色倒置仍然是灰色。

当文本颜色较暗或其他方式时，如何做一个明亮的文本阴影？

How to do a bright text shadow when text color is dark and other way?

html

css

colors

filter

text-shadow