css刪除線css

CSS刪除線(CSS Strikethrough)

在網頁設計中，刪除線常用來表示某一段文字不再有效或已經被修改。 CSS中提供了多種方法來為文字新增刪除線，本文將介紹其中兩種方法： text-decoration 和 text-decoration-line。

text-decoration屬性

text-decoration屬性是CSS中用於為文字添加修飾線的屬性，它可以控製文字的底線、上劃線、刪除線等。以下是text-decoration屬性的語法：

text-decoration: [line] [style] [color];

其中， line 參數用來設定修飾線的類型， style 參數用來設定修飾線的樣式， color 參數用來設定修飾線的顏色。

為文字新增刪除線，只需要將 line 參數設為 line-through，樣式可以預設不設定，顏色可以根據需求進行設定。下面是一個例子：

p {
    text-decoration: line-through;
    color: red;
}

這個例子中，我們為 p 元素添加了刪除線，樣式沒有設置，顏色設定為紅色。

text-decoration-line屬性

text-decoration-line屬性是CSS3中新增的屬性，用來控制修飾線的類型。與text-decoration屬性不同，text-decoration-line只需要設定一種類型即可。下面是text-decoration-line屬性的語法：

text-decoration-line: [line];

我們只需要將 line 參數設為 line-through 就可以為文字新增刪除線。下面是一個範例：

p {
    text-decoration-line: line-through;
    color: blue;
}

這個範例中，我們同樣為 p 元素新增了刪除線，顏色設定為藍色。由於text-decoration-line屬性只控制線條類型，顏色需要透過 color 屬性來設定。

總結

透過以上兩種方法，我們可以在CSS中為文字新增刪除線。 text-decoration屬性可以同時控制多種修飾線，text-decoration-line屬性只要設定刪除線，可以更簡潔。在實際開發過程中，需要根據需求來選擇合適的方法來實現刪除線效果。

以上是css刪除線css的詳細內容。更多資訊請關注PHP中文網其他相關文章！