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 等。
示例
让我们看一个使用简写属性装饰文本的示例:
<!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 值。
示例
让我们看一个示例:
<!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 属性:
<!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>
广告