text-decoration-color用于设置文本装饰线颜色，如红色下划线：p{text-decoration-line:underline;text-decoration-color:red;}，现代浏览器支持良好，老旧浏览器可用border-bottom替代。
在CSS中，text-decoration-color 属性用于设置文字装饰（如下划线、上划线、删除线）的颜色。如果你只想改变下划线的颜色，这个属性非常实用。
基本语法
使用 text-decoration-color 可以单独控制装饰线的颜色，而不会影响文字本身的颜色。
text-decoration-color: color-value;其中 color-value 可以是颜色名称、十六进制值、rgb()、rgba() 等合法颜色格式。
设置下划线颜色的完整写法
虽然 text-decoration-color 能单独设置颜色，但通常与 text-decoration-line 和 text-decoration-style 一起使用，或者直接用简写属性 text-decoration。
立即学习“前端免费学习笔记（深入）”；
示例：给文字添加红色下划线
p {text-decoration-line: underline;
text-decoration-color: red;
}
也可以用简写形式：
p {
text-decoration: underline;
text-decoration-color: blue;
}
或者一行写完：
p {text-decoration: underline solid red;
}
这里的三个值分别对应：线型（underline）、样式（solid，可为dashed/dotted等）、颜色（red）。
兼容性与注意事项
text-decoration-color 在现代浏览器中支持良好，但在一些旧版本浏览器（如IE）中不被支持。
建议在需要兼容老浏览器时进行测试，或使用其他替代方案，比如用 border-bottom 模拟下划线：
p {color: black;
border-bottom: 1px solid red;
text-decoration: none;
}
这种方式更灵活，能精确控制线条粗细和颜色，但会影响布局（增加高度），需注意 margin 或 padding 调整。
基本上就这些。掌握 text-decoration-color 能让你更自由地设计文本样式，尤其是需要突出链接或标题下划线时特别有用。
