怎么用css設(shè)置刪除線樣式

這篇文章主要介紹了怎么用css設(shè)置刪除線樣式，具有一定借鑒價(jià)值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

專注于為中小企業(yè)提供成都網(wǎng)站設(shè)計(jì)、網(wǎng)站建設(shè)服務(wù),電腦端+手機(jī)端+微信端的三站合一,更高效的管理,為中小企業(yè)岢嵐免費(fèi)做網(wǎng)站提供優(yōu)質(zhì)的服務(wù)。我們立足成都，凝聚了一批互聯(lián)網(wǎng)行業(yè)人才，有力地推動(dòng)了1000多家企業(yè)的穩(wěn)健成長(zhǎng)，幫助中小企業(yè)通過(guò)網(wǎng)站建設(shè)實(shí)現(xiàn)規(guī)模擴(kuò)充和轉(zhuǎn)變。

<!DOCTYPEhtml>

<html>

<head>

<metacharset="utf-8">

<title>css刪除線</title>

<style>

.demo{

text-decoration:line-through;

color:red;

}

span{color:black;}

</style>

</head>

<body>

<div>

<p><spanclass="demo"><span>這里有一個(gè)刪除線</span></span></p>

</div>

</body>

</html>

通過(guò)瀏覽器訪問(wèn)，css刪除線實(shí)現(xiàn)效果如下圖：

009b6b898c6a53b94e6b75d5abb1066.png

這里主要用到css中的text-decoration：line-through樣式屬性。

首先大家應(yīng)該都知道text-decoration屬性是規(guī)定添加到文本的修飾。

而值為line-through則表示定義穿過(guò)文本下的一條線。

在上述代碼中我們結(jié)合了text-decoration：line-through；和<span></span>樣式定義文本字體顏色的樣式，來(lái)實(shí)現(xiàn)刪除線與文字顏色不一的樣式效果！

同理我們也可以輕松的實(shí)現(xiàn)原價(jià)現(xiàn)價(jià)的相關(guān)效果：