17370845950

可以，text-decoration 支持空格分隔多值如 underline line-through；现代写法用 text-decoration-line 等分离属性实现颜色、粗细、偏移的独立控制。

text-decoration 能同时设置下划线和删除线吗

可以，但不是靠多次写 text-decoration，而是用空格分隔多个值。CSS 规范允许在单个 text-decoration 声明中组合使用 underline、line-through、overline 等修饰类型。

• 错误写法：text-decoration: underline; text-decoration: line-through; —— 后者会完全覆盖前者
• 正确写法：text-decoration: underline line-through;
• 顺序无关紧要，line-through underline 效果相同
• 注意：IE 11 及更早版本不支持多值写法，只认第一个值（如只显示下划线）

text-decoration-line 是更现代的写法吗

是的。text-decoration-line 是 CSS Text Decoration Level 3 引入的独立属性，专门控制“画哪条线”，和 text-decoration-color、text-decoration-style 解耦。它解决了老式 text-decoration 一锅炖带来的可维护性问题。

• 兼容性：Chrome 57+、Firefox 36+、Safari 12.1+、Edge 79+ 支持；IE 完全不支持
• 等效写法：text-decoration-line: underline line-through;
• 优势：能单独改颜色或样式而不影响其他线型，比如：

  text-decoration-line: underline line-through;
  text-decoration-color: red;
  text-decoration-style: wavy;

• 如果只设 text-decoration-line，其他装饰属性（颜色、粗细、偏移）仍沿用默认值

为什么加了 text-decoration 还看不到删除线

常见原因不是语法错，而是被其他样式覆盖或渲染逻辑干扰。重点排查以下几点：

• 父元素设置了 text-decoration: none;，且未在子元素中显式重置（text-decoration 不继承，但会受层叠影响）
• 元素是 inline 元素（如 ），但内部包含块级内容（如 ），此时部分浏览器可能忽略装饰线
• 使用了 transform: scale() 或 font-size: 0; 等导致视觉上“线不可见”的操作
• CSS 优先级冲突：检查是否被更高权重的选择器（如 ID 或 !important）覆盖

如何让下划线离文字远一点或换颜色

老式 text-decoration 无法单独调位置或颜色；必须升级到 Level 3 的拆分属性，或用 border-bottom 模拟。

• 推荐方案（现代浏览器）：

  text-decoration-line: underline;
  text-decoration-color: #007bff;
  text-decoration-thickness: 2px;
  text-decoration-offset: 4px;

• text-decoration-offset 控制距离，默认是浏览器自动计算，设为 4px 或 0.2em 更可控
• 降级方案（兼容旧浏览器）：用 border-

  

  bottom + padding-bottom 模拟，但无法实现真正的“删除线”语义
• 注意：text-decoration-thickness 在 Firefox 中需启用 layout.css.text-decorations.level-3.enabled 标志（v91+ 默认开启）
实际项目中，text-decoration 多值写法足够应付多数下划线+删除线需求；但一旦涉及定制颜色、间距或动画，就得切到 text-decoration-line + text-decoration-offset 组合——别忘了查 Can I Use 上的兼容表，尤其当目标用户还在用旧版 Edge 或 Safari 时。