CSS：看不见的文字装饰，能给文本排版带来哪些意想不到的效果？

2023-11-06 09:16:54

CSS 文字装饰新概念

在 CSS 中，文字算是我们天天会打交道的一大类了，有了文字，则必不可少一些文字装饰。但你是否知道除了我们熟知的 text-decoration，在 CSS3 中，还新增了一个 text-emphasis 属性？这些属性有什么区别呢？如何使用呢？下面我们一一来解答。

`text-decoration`与`text-emphasis`

`text-decoration`

text-decoration 属性用于为文本添加装饰线，包括下划线、删除线和上划线。其语法如下：

text-decoration: none | underline | overline | line-through | blink | initial | inherit;

其中，none 表示不添加任何装饰线；underline 表示添加下划线；overline 表示添加上划线；line-through 表示添加删除线；blink 表示添加闪烁效果（不推荐使用）；initial 表示使用初始值；inherit 表示继承父元素的 text-decoration 值。

`text-emphasis`

text-emphasis 属性用于为文本添加强调样式，包括颜色、样式和位置。其语法如下：

text-emphasis: none | [ <emphasis-style> || <emphasis-color> ] | [ <emphasis-style> <emphasis-color> ] | initial | inherit;

其中，none 表示不添加任何强调样式；<emphasis-style> 表示强调样式，包括 dot（点）、circle（圆圈）、double-circle（双圆圈）、overline（上划线）和 underline（下划线）；<emphasis-color> 表示强调颜色。

使用 `text-decoration` 和 `text-emphasis`

在实际使用中，我们可以通过设置 text-decoration 和 text-emphasis 属性来为文本添加不同的装饰和强调效果。例如，以下代码将为文本添加下划线和红色强调色：

text-decoration: underline;
text-emphasis: dot red;

使用 `background` 模拟文字下划线

除了使用 text-decoration 属性添加下划线外，我们还可以使用 background 属性来模拟下划线效果。这种方法的好处是，我们可以控制下划线的颜色、宽度和位置。

以下代码将使用 background 属性为文本添加下划线：

background: linear-gradient(to right, transparent, transparent 50%, black 50%, black 100%);
background-size: 100% 1px;
background-position: bottom;
background-repeat: no-repeat;