在 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 次瀏覽

開啟你的 職業

完成課程獲得認證

開始
廣告
© . All rights reserved.