在 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>
廣告
資料結構
網路
關係型資料庫管理系統(RDBMS)
作業系統
Java
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP