HTML中如何使用text-decoration-color自定义装饰线颜色

你是否尝试过为网页文字的下划线更换颜色，却发现直接设置text-decoration-color: red;毫无效果？这个问题的根源非常明确：必须同时指定装饰线的类型，浏览器才能正确应用颜色。无论是通过独立的text-decoration-line属性，还是使用text-decoration简写属性，都需要先声明线条样式。即使是自带下划线的超链接，也需要重新定义线条，颜色属性才会生效。

为什么 text-decoration-color 没生效？

属性失效最常见的原因是缺少必要的线条类型声明。浏览器需要明确的指令来知道为哪种装饰线（如下划线、删除线、上划线）着色。以下是正确与错误的用法对比：

• 错误示例：text-decoration-color: red; → 属性被忽略，无任何效果。
• 正确示例：text-decoration: underline; text-decoration-color: red; → 下划线成功变为红色。
• 推荐简写：text-decoration: underline solid red; → 一行代码同时定义线条类型、样式和颜色，简洁高效。
• 重要提示：当使用text-decoration: line-through overline;同时设置删除线和上划线时，text-decoration-color会统一应用于所有线条，无法为每条线单独指定不同颜色。

text-decoration 简写里颜色位置很关键

使用简写属性时，属性值的顺序至关重要。其标准语法为text-decoration: [