如何在CSS中设置文字装饰颜色_text-decoration-color控制下划线颜色

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 能让你更自由地设计文本样式，尤其是需要突出链接或标题下划线时特别有用。