CSS 更新 - 文本装饰和下划线的新样式属性


通过引入以下文本装饰属性,我们现在可以比以前更多的方式来设置文本样式。text-decoration 是 text-decoration-thickness、text-decoration-color、text-decoration-line 和 text-decoration-style 的简写。text-decoration-skip、text-decoration-skip-ink、text-decoration、text-underline-offset 和 text-underline-position 需要显式指定。

语法

CSS 文本装饰的语法如下所示:

Selector { text-decoration: /*value*/ }

text-decoration 简写属性

text-decoration 是 text-decoration-thickness、text-decoration-color、text-decoration-line 和 text-decoration-style 的简写。text-decoration-skip、text-decoration-skip-ink 等。

示例

让我们看一个使用简写属性装饰文本的示例:

Open Compiler
<!DOCTYPE html> <html> <head> <style> p { margin: 3%; font-size: x-large; text-decoration: dotted underline purple 3px; } </style> </head> <body> <p>Super Demo abcdefghijklmnopqrstuvwxyz</p> </body> </html>

带文本上划线和下划线的文本装饰

我们可以使用以下属性在文本上设置下划线和上划线:

text-decoration-line: underline overline;

上面,我们设置了 underline 和 overline 值。

示例

让我们看一个示例:

Open Compiler
<!DOCTYPE html> <html> <head> <style> p { margin: 3%; font-size: x-large; text-decoration-line: underline overline; text-decoration-style: dotted; text-decoration-skip-ink: none; text-decoration-thickness: 4px; } </style> </head> <body> <p>Super Demo abcdefghijklmnopqrstuvwxyz</p> </body> </html>

使用 skip ink 控制行为的文本装饰

text-decoration-skip-ink 属性用于控制下划线和上划线的行为。其值可以是以下值:

  • auto - 在经过字符时跳过下划线/上划线。默认值。

  • none - 下划线和上划线在文本内容的整个长度上绘制,包括穿过字形下降和上升部分的部分。

示例

以下示例说明了 CSS text-decoration 属性:

Open Compiler
<!DOCTYPE html> <html> <head> <style> #one { text-decoration-style: double; text-decoration-skip-ink: auto; } p { padding: 2%; text-decoration-line: underline overline; text-decoration-style: wavy; } p:nth-of-type(even) { text-decoration: overline; } span { text-decoration: line-through; } </style> </head> <body> <p id="one">Random Demo abcdefghijklmnopqrstuvwxyz</p> <p>Random Demo Text</p> <p>Random <span>Demo</span> Text</p> </body> </html>

更新于: 2023年10月31日

115 次查看

开启你的 职业生涯

通过完成课程获得认证

开始学习
广告