溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本篇內容介紹了“css如何設置文字刪除線”的有關知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領大家學習一下如何處理這些情況吧！希望大家仔細閱讀，能夠學有所成！
在css中可以通過給文字設置“text-decoration: line-through;”屬性來實現刪除線效果；“text-decoration”屬性用于“裝飾”文本的內容，可以為所選文本添加下劃線、上劃線、直線或組合線。
本文操作環境：windows7系統、HTML5&&CSS3版、Dell G3電腦。
想要使用CSS實現文字刪除線效果，可以使用text-decoration屬性，將其設置為line-through值即可。text-decoration屬性用于“裝飾”文本的內容，可以為所選文本添加下劃線，上劃線，直線或組合線；它本質上是用不同種類的行來裝飾文本。
text-decoration屬性規定添加到文本的修飾，其中修飾的顏色由 "color" 屬性設置。這個屬性允許對文本設置某種效果，如加下劃線。如果后代元素沒有自己的裝飾，祖先元素上設置的裝飾會“延伸”到后代元素中。
語法：
text-decoration: none|underline|overline|line-through|blink|inherit;
屬性值：
● none：默認，定義標準的文本；不繪制任何線條，并刪除任何現有裝飾。
● underline：繪制文本下的一條1px線。
● overline：繪制文本頂部的一條1px線。
● line-through：在文本的“中間”點繪制1px線，即繪制穿過文本下的一條線。
● blink：定義閃爍的文本。注：該值在W3C規范中，但已棄用，不適用于任何當前瀏覽器；當它工作時，通過在0％和100％不透明度之間快速切換，使文本看起來“閃爍”。
● inherit：繼承父級 text-decoration 屬性的值。
text-decoration作為速記屬性
text-decoration可以與text-decoration-line、text-decoration-style和text-decoration-color組合使用，作為一個速記屬性
.fancy-underline {
text-decoration-line: underline;
text-decoration-style: wavy;
text-decoration-color: red;
/* can be shortened to */
text-decoration: underline wavy red;
}示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
.underline {
text-decoration: underline;
}
.overline {
text-decoration: overline;
}
.strikethrough {
text-decoration: line-through;
}
.multiple {
text-decoration: underline overline line-through;
}
.blink {
text-decoration: blink;
}
.wavy {
text-decoration: red underline overline wavy;
}
body {
padding: 1em 2em;
}
</style>
</head>
<body style="text-align:center">
<p class="underline">text-decoration: underline;</p>
<p class="overline">text-decoration: overline;</p>
<p class="strikethrough">text-decoration: line-through;</p>
<p class="multiple">text-decoration: underline overline line-through;</p>
<p class="blink">text-decoration: blink;</p>
<p class="wavy">text-decoration: red underline overline wavy;</p>
</body>
</html>效果圖：
從上例可以看出，可以將underline，overline或line-through組合在一個以空格分隔的列表中，以添加多個裝飾線效果。
“css如何設置文字刪除線”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識可以關注億速云網站，小編將為大家輸出更多高質量的實用文章！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
