数据结构
网络
RDBMS
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
时尚研究
法律研究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>
更新于: 2023年10月31日
115 次查看
广告