数据结构
网络
关系型数据库管理系统（RDBMS）
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理
化学
生物
数学
英语
经济学
心理学
社会学
时尚研究
法律研究在 CSS 中设置文本装饰颜色
要设置文本装饰的颜色，请使用 text-decoration-color 属性。要将此颜色置顶线、下划线、删除线等，请使用 text-decoration 属性。让我们看看如何设置文本装饰的颜色
给文本装饰置顶线着色
文本以置顶线装饰，然后使用 text-decoration-color 属性设置颜色 −
.demo {
text-decoration: overline;
text-decoration-color: yellow;
}
实例
以下是示例 −
<!DOCTYPE html>
<html>
<head>
<style>
.demo {
text-decoration: overline;
text-decoration-color: yellow;
}
</style>
</head>
<body>
<h1>Examination Details</h1>
<p class="demo">Exam on 20th December.</p>
<p class="demo2">Exam begins at 9AM.</p>
</body>
</html>
给文本装饰下划线着色
文本以下划线装饰，然后使用 text-decoration-color 属性设置颜色 −
.demo {
text-decoration: underline;
text-decoration-color: orange;
}
实例
现在让我们看看另一个示例 −
<!DOCTYPE html>
<html>
<head>
<style>
.demo {
text-decoration: underline;
text-decoration-color: orange;
}
</style>
</head>
<body>
<h1>Details</h1>
<p class="demo">Examination Center near ABC College.</p>
<p class="demo2">Exam begins at 9AM.</p>
</body>
</html>
给文本装饰删除线着色
文本以删除线装饰，然后使用 text-decoration-color 属性设置颜色。删除线会在文本中显示一条线
.demo {
text-decoration: overline;
text-decoration-color: blue;
}
实例
以下是示例 −
<!DOCTYPE html>
<html>
<head>
<style>
.demo {
text-decoration: line-through;
text-decoration-color: blue;
}
</style>
</head>
<body>
<h1>Demo Heading</h1>
<p class="demo">This is a demo text.</p>
<p class="demo2">This is another demo text.</p>
</body>
</html>
更新于：2023 年 12 月 26 日
155 次浏览
广告