css文本装饰属性_text-decoration设置下划线与删除线

2026-01-18

css文本装饰属性_text-decoration设置下划线与删除线

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

css文本装饰属性_text-decoration设置下划线与删除线

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 还看不到删除线

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

天缘企业网站系统NET版1.0

天缘企业网站系统NET版主要功能：基本设置：站点常规属性设置。导航管理：添加/删除导航菜单，隐藏与显示。单页管理：增加修改单页，通过强大的编辑器可插入动画图片视频等内容。新闻管理：新闻分类管理，增加/删除/修改新闻。产品管理：产品二级分类,产品略缩图，产品推荐，增/删/改产品。下载管理：下载分类管理，可做软件下载，文件下载等功能。幻灯管理：幻灯添加、幻灯修改等。招聘管理：在线发布招

下载

父元素设置了 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 时。
https://www.php.cn/faq/1996141.html