我注意到 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 的屬性我應該覆寫以阻止這種行為？
uj5u.com熱心網友回復：
根據我的閱讀，下劃線應該是第一個被繪制的。這就是接下來發生的事情，text-shadow如果我的閱讀是正確的。
來自https://drafts.c??sswg.org/css-text-decor/#painting-order的繪畫順序是：
與 [CSS2] 中一樣，文本裝飾會立即繪制在它們裝飾的文本上方/下方，按以下順序（最底部優先）：
陰影（文本陰影）
下劃線（文本裝飾）
上劃線（文本裝飾）
文本
強調標記（文本強調）
直通（文本裝飾）
也就是說，似乎陰影應該被下劃線覆寫，但 Chrome (Edge) 并沒有遵循這一點。
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/414453.html
標籤：