text-decoration-color 在 Chrome 60+、Firefox 36+、Edge 79+（Chromium 版）及 Safari 12.1+ 中可用，旧版 Safari 和 IE 完全不支持；需与 text-decoration-line 同时使用才生效，不继承但默认取父级 color，精细控制应采用伪元素替代。
text-decoration-color 在哪些浏览器里能用
它不是所有浏览器都支持，特别是旧版 Safari 和 IE 完全不认这个属性。Chrome 60+、Firefox 36+、Edge 79+（Chromium 版）可以放心用；Safari 要等到 12.1+ 才开始支持，而且早期版本对 text-decoration-color 和 text-decoration-line 的组合渲染有偏差。
如果你的项目需要兼容 Safari 12 之前或 iOS 12 以下设备，别直接依赖它——得用 border-bottom 或伪元素模拟下划线，并手动控制颜色。
和 text-decoration 一起用时的写法陷阱
text-decoration-color 必须和 text-decoration-line（比如 underline）同时存在才生效；光写 color 或只写 text-decoration-color，修饰线不会显示。
- ✅ 正确：
span { text-decoration-line: underline; text-decoration-color: #ff6b6b; } - ❌ 无效：
span { text-decoration-color: #ff6b6b; }（没指定 line，浏览器忽略 color） - ⚠️ 注意：
text-decoration是简写属性，如果用它覆盖了 line，又没显式带上 color，text-decoration-color会被重置为当前文字颜色
修饰线颜色继承和层叠行为
text-decoration-color 不继承，但它的实际渲染颜色会受父级 color 影响——当没显式设置时，它默认取父元素的 color 值，而不是自身文字颜色。
立即学习“前端免费学习笔记（深入）”；
这意味着：如果一个 div 设了 color: #333，里面 a 标签设了 color: blue 但没设 text-decoration-color，那链接的下划线颜色还是 #333，不是 blue。
- 要让下划线颜色匹配文字色，必须显式写：
a { color: blue; text-decoration-line: underline; text-decoration-color: blue; } - 用
currentColor可以省事：a { color: blue; text-decoration: underline; text-decoration-color: currentColor; } - 多个修饰线（如
underline overline）共存时，text-decoration-color统一控制所有线的颜色，没法单独设每条线的颜色
替代方案：什么时候该放弃 text-decoration-color
当你需要更精细的控制——比如下划线离文字距离、粗细、虚线样式、两端截断、或者某段文字里只有部分字符带彩色下划线——text-decoration-color 就力不从心了。
这时更可靠的是用 ::after 伪元素 + border-bottom 或 background-image 模拟：
- 伪元素能自由定位、设高宽、加动画、避开换行截断问题
-
border-bottom兼容性极好，连 IE8 都支持 - 遇到文字有
line-height或vertical-align变动时，伪元素比原生修饰线更稳定
原生 text-decoration-color 看似简单，但一旦布局稍复杂，比如 inline 元素嵌套、flex 排版、或需要响应式微调位置，就容易出现对不齐、错位、或被裁剪的情况——这些细节，文档里几乎不提，但上线后准出问题。
