text-decoration-color能单独设置删除线颜色，但必须与text-decoration-line: line-through配合使用，否则无效；不支持渐变色，旧版Safari和IE不支持，兼容性差时可用伪元素模拟。
text-decoration-color 能不能单独给删除线设颜色
可以，但必须和 text-decoration-line 一起用，不能单独生效。浏览器会忽略只有 text-decoration-color 没有声明删除线类型的样式。
-
text-decoration-line: line-through是启用删除线的必要前提 -
text-decoration-color只控制颜色，不控制位置、粗细或样式（如波浪线） - 它不支持渐变色，只接受标准颜色值（
#ff0000、red、rgb(255, 0, 0)等） - 旧版 Safari（≤12.1）和 IE 完全不支持该属性，需用
text-decoration简写或伪元素降级
为什么设置了 text-decoration-color 却没变色
常见原因不是语法错，而是被其他文本装饰覆盖或继承干扰。最典型的是：
- 父元素设置了
text-decoration: line-through，子元素只设text-decoration-color—— 子元素未重置text-decoration-line，导致浏览器沿用父级整条声明，忽略子级颜色 - CSS 优先级冲突：比如
text-decoration: line-through red这种简写会覆盖后续独立的text-decoration-color - 使用了
text-decoration: none的重置规则，它会清空所有装饰（包括颜色）
/* ❌ 错误：只设颜色，没显式声明 line-through */
.deleted {
text-decoration-color: #ff6b6b;
}
/ ✅ 正确：必须同时指定类型 /
.deleted {
text-decoration-line: line-through;
text-decoration-color: #ff6b6b;
}
兼容性差时怎么安全实现红删除线
当需要支持 Safari 12 或更低版本、或某些安卓 WebView 时，text-decoration-color 会静默失效。稳妥做法是用伪元素模拟：
- 禁用原生删除线：
text-decoration: none - 用
::after绝对定位画一条带颜色的横线 - 需手动调
bottom和height对齐文字基线（通常bottom: 0.2em、height: 1px） - 注意响应式场景下字体缩放可能影响偏移量
.custom-strike::after {
content: '';
position: absolute;
left: 0;
right: 0;
bottom: 0.2em;
height: 1px;
background-color: #ff6b6b;
pointer-events: none;
}text-decoration-thickness 和 color 配合用要注意什么
Chrome 89+ 和 Firefox 70+ 支持 text-decoration-thickness 控制删除线粗细，但它和 color 是同级属性，顺序无关，但必须共存于同一元素且都启用 line-through：
立即学习“前端免费学习笔记（深入）”；
-
text-decoration-thickness: 2px不会影响颜色，但过粗可能让颜色显得发虚（尤其在低 DPI 屏幕） - 避免设
text-decoration-thickness: auto后再设颜色——auto 行为由字体决定，颜色可能被弱化 - 若同时用
text-decoration-style: wavy，color依然生效，但波浪线渲染质量因浏览器而异
真正难搞的不是写法，是跨浏览器下删除线在不同字号、不同字体中的垂直对齐一致性——这没有通用解，只能按主力字体微调 text-underline-offset 或伪元素 bottom 值。
