为什么 Chrome 和 Edge 在超链接下划线上显示文本阴影？

Question

我注意到 Chrome 和 Edge 在超链接上呈现文本阴影的方式有些奇怪。

例如，我有一种情况，我将两个文本阴影应用于多个段落元素。其中一个段落只是带有 text-decoration: underline; 的标准超链接。这是 HTML 和 CSS:

<p class="header__text">
    <a href="https://google.com">See the 2021 edition ...</a>
</p>

.header__text {
    color: #fff;
    text-shadow: 2px 2px 2px #000, 1px 1px 24px #000;
    padding-left: 16px;
    padding-right: 16px;
}
a {
    color: #c62828;
}

这呈现了我在 Safari 和 Firefox（Mac 和 PC）中所期望的方式，阴影完全位于文本和下划线下方。

但在 Chrome（Mac 和 PC）和 Edge 中，文本阴影位于文本下方，但超过超链接的下划线。

我不明白为什么阴影在这两个浏览器中会这样。这只是一个错误吗？是否有一些特定于 Blink 的属性我应该覆盖以停止此行为？

Answer 1

根据我的阅读，下划线应该是最先画的。如果我的阅读是正确的，那么接下来的内容似乎是 text-shadow。

从https://drafts.csswg.org/css-text-decor/#painting-order起绘画顺序是：

As in [CSS2], text decorations are drawn immediately over/under the text they decorate, in the following order (bottommost first):

shadows (text-shadow)

underlines (text-decoration)

overlines (text-decoration)

text

emphasis marks (text-emphasis)

line-through (text-decoration)

也就是说，阴影似乎应该被下划线覆盖，但 Chrome（边缘）不遵循这一点。

为什么 Chrome 和 Edge 在超链接下划线上显示文本阴影？

Why do Chrome and Edge show text-shadow over hyperlink underline?

html

css

google-chrome

hyperlink

text-shadow