HTML如何设置文本装饰？text-decoration属性的用法是什么？-html教程-PHP中文网

HTML如何设置文本装饰？text-decoration属性的用法是什么？

星降

发布： 2025-08-14 14:32:02

原创

901人浏览过

使用text-decoration属性可设置文本装饰效果，1. text-decoration-line用于定义下划线、上划线、删除线或无装饰；2. text-decoration-color设置装饰线颜色；3. text-decoration-style定义实线、双线、点线、虚线或波浪线；4. text-decoration-thickness设定装饰线粗细；5. text-decoration-skip-ink控制下划线是否跳过字母下降部分，auto值可提升可读性；6. 移除链接下划线需使用text-decoration: none，并结合颜色、背景、边框等其他视觉方式确保可访问性；7. 基本文本装饰兼容性良好，但高级属性在旧版ie中支持较差，建议采用渐进增强与跨浏览器测试以保障显示效果。

HTML如何设置文本装饰？text-decoration属性的用法是什么？

HTML设置文本装饰主要通过CSS的

text-decoration

登录后复制

属性实现，它允许你为文本添加下划线、上划线、删除线等效果，甚至可以自定义颜色和样式。

解决方案：

text-decoration

登录后复制

属性是一个复合属性，通常可以设置以下几个值：

立即学习“前端免费学习笔记（深入）”；

```
text-decoration-line
```
登录后复制
: 指定文本装饰的类型，例如
```
underline
```
登录后复制
（下划线）、
```
overline
```
登录后复制
（上划线）、
```
line-through
```
登录后复制
（删除线）或
```
none
```
登录后复制
（无装饰）。可以同时指定多个值，比如
```
underline overline
```
登录后复制
。
```
text-decoration-color
```
登录后复制
: 指定文本装饰的颜色。
```
text-decoration-style
```
登录后复制
: 指定文本装饰的样式，例如
```
solid
```
登录后复制
（实线）、
```
double
```
登录后复制
（双线）、
```
dotted
```
登录后复制
（点线）、
```
dashed
```
登录后复制
（虚线）、
```
wavy
```
登录后复制
（波浪线）。
```
text-decoration-thickness
```
登录后复制
: 指定文本装饰的粗细，可以使用长度单位（如
```
px
```
登录后复制
、
```
em
```
登录后复制
）或相对值（如
```
auto
```
登录后复制
、
```
from-font
```
登录后复制
）。

例如：

<!DOCTYPE html>
<html>
<head>
<style>
.underline {
  text-decoration: underline;
}

.overline {
  text-decoration: overline;
}

.line-through {
  text-decoration: line-through;
}

.combined {
  text-decoration: underline overline;
}

.custom {
  text-decoration: underline wavy red;
}

.thick {
  text-decoration: underline solid blue 5px;
}

.from-font {
    text-decoration: underline from-font; /* 尝试使用 from-font */
}

</style>
</head>
<body>

<p class="underline">This text is underlined.</p>
<p class="overline">This text has an overline.</p>
<p class="line-through">This text has a line through it.</p>
<p class="combined">This text has both underline and overline.</p>
<p class="custom">This text has a custom underline.</p>
<p class="thick">This text has a thick underline.</p>
<p class="from-font">This text has an underline with from-font thickness.</p>

</body>
</html>

登录后复制

需要注意的是，

text-decoration: none;

登录后复制

常用于移除链接默认的下划线，但务必考虑可访问性，确保用户仍然能清晰地识别链接。仅仅依靠颜色来区分链接是不够的，最好配合其他视觉提示，比如hover时的背景色变化。

如何使用text-decoration-skip-ink来控制下划线是否穿过字母的下降部分？

text-decoration-skip-ink

登录后复制

属性控制文本装饰线是否“跳过”字母的下降部分，比如字母 "g"、"j"、"p"、"q"、"y" 的下半部分。默认情况下，浏览器可能会让下划线穿过这些部分，但使用

text-decoration-skip-ink: auto;

登录后复制

可以让下划线在这些区域中断，提高可读性。

text-decoration-skip-ink: none;

登录后复制

则会强制下划线穿过这些字母。

示例：

<!DOCTYPE html>
<html>
<head>
<style>
.skip-ink {
  text-decoration: underline;
  text-decoration-skip-ink: auto; /* 或 skip */
}

.no-skip-ink {
  text-decoration: underline;
  text-decoration-skip-ink: none;
}
</style>
</head>
<body>

<p class="skip-ink">This is some text with a skipping underline, like the letter g.</p>
<p class="no-skip-ink">This is some text with a non-skipping underline, also like the letter g.</p>

</body>
</html>

登录后复制

text-decoration-skip-ink

登录后复制

的简写形式是

text-decoration-skip

登录后复制

，

auto

登录后复制

可以简写为

skip

登录后复制

。但请注意，并非所有浏览器都完全支持此属性，因此在实际应用中可能需要进行兼容性测试。

text-decoration属性在不同浏览器中的兼容性如何？

text-decoration

登录后复制

属性本身具有良好的浏览器兼容性，几乎所有现代浏览器都支持

underline

登录后复制

、

overline

登录后复制

、

line-through

登录后复制

和

none

登录后复制

这些基本值。然而，对于

text-decoration-color

登录后复制

、

text-decoration-style

登录后复制

和

text-decoration-thickness

登录后复制

这些更细粒度的属性，兼容性可能存在一些差异，尤其是旧版本的浏览器。

Motiff妙多

Motiff妙多是一款AI驱动的界面设计工具，定位为“AI时代设计工具”

250

查看详情

基本值 (
underline
登录后复制
,
overline
登录后复制
,
line-through
登录后复制
,
none
登录后复制
): 几乎所有浏览器都支持。
text-decoration-color
登录后复制
,
text-decoration-style
登录后复制
,
text-decoration-thickness
登录后复制
: 现代浏览器（Chrome, Firefox, Safari, Edge）基本都支持。 Internet Explorer 对这些属性的支持较差，可能需要使用前缀或替代方案。

要确保最佳的跨浏览器兼容性，可以考虑以下几点：

使用简写形式: 尽量使用
```
text-decoration
```
登录后复制
简写属性，同时设置
```
line
```
登录后复制
、
```
style
```
登录后复制
和
```
color
```
登录后复制
。
渐进增强: 对于不支持高级属性的浏览器，至少保证基本的文本装饰效果是可用的。
测试: 在不同的浏览器和设备上进行测试，确保效果符合预期。
考虑使用JavaScript: 在某些情况下，可以使用 JavaScript 来模拟
```
text-decoration
```
登录后复制
的效果，以实现更好的跨浏览器兼容性。但这通常只在非常特殊的情况下才需要。

总的来说，对于大多数现代 Web 开发场景，

text-decoration

登录后复制

属性的兼容性已经足够好，可以直接使用。但对于需要支持旧版本浏览器的项目，需要进行额外的兼容性处理。

如何移除链接的默认下划线，并使用其他方式来突出显示链接？

移除链接的默认下划线非常简单，只需设置

text-decoration: none;

登录后复制

即可。但是，仅仅移除下划线可能会导致用户难以识别链接，影响可访问性。因此，在移除下划线的同时，必须使用其他视觉方式来突出显示链接。

以下是一些常用的方法：

改变颜色: 使用不同的颜色来区分链接和普通文本。同时，可以考虑在鼠标悬停时改变颜色，提供额外的反馈。
```
a {
  text-decoration: none;
  color: blue;
}

a:hover {
  color: darkblue;
}
```
登录后复制

添加背景色: 在链接上添加背景色，或者在鼠标悬停时改变背景色。

a {
  text-decoration: none;
  background-color: lightblue;
}

a:hover {
  background-color: deepskyblue;
}

登录后复制

改变字体样式: 使用不同的字体样式，例如加粗或斜体。
```
a {
  text-decoration: none;
  font-weight: bold;
}
```
登录后复制

添加边框: 在链接周围添加边框，或者在鼠标悬停时显示边框。

a {
  text-decoration: none;
  border-bottom: 1px solid blue; /* 初始状态使用较淡的颜色 */
}

a:hover {
  border-bottom: 1px solid darkblue; /* 悬停时加深颜色 */
}

登录后复制

使用图标: 在链接旁边添加图标，表明这是一个链接。

重要的是要确保所选择的突出显示方式与网站的整体设计风格一致，并且易于用户识别。同时，要考虑可访问性，确保使用颜色对比度足够高，方便视觉障碍用户识别链接。避免仅仅依靠颜色来区分链接，最好结合其他视觉提示。

以上就是HTML如何设置文本装饰？text-decoration属性的用法是什么？的详细内容，更多请关注php中文网其它相关文章！

大家都在看：

Mac Ventura系统下TextEdit保存HTML默认UTF-8设置 Windows11 Widgets面板添加HTML学习进度插件 html如何快速输入_HTML代码快速输入（快捷键/工具）方法 Mac Parallels中Windows子系统共享HTML+CSS文件夹 Mac神器Live Server，HTML+CSS改一行全局同步！