在CSS中,劃掉文字通常是用在刪除線中,可以在文本中添加一條穿過文字的線,以示區別。
在CSS中添加刪除線有兩種方法,一種是通過text-decoration屬性,另一種是通過border-bottom屬性。
/* text-decoration方法 */ text-decoration: line-through; /* border-bottom方法 */ border-bottom: 1px solid #000; text-decoration: none;
首先,我們來看text-decoration方法。這個屬性可以設置多個值,如下:
text-decoration: none; /* 無裝飾 */ text-decoration: underline; /* 下劃線 */ text-decoration: overline; /* 上劃線 */ text-decoration: line-through; /* 刪除線 */ text-decoration: blink; /* 閃爍 */
其中,我們需要用到的是line-through值,將它應用到文字的樣式中,即可實現劃掉文字的效果。
p { text-decoration: line-through; }
另外一種方法是通過border-bottom屬性來實現。我們可以在文字下方添加一條1像素粗的實線,然后去掉下劃線的樣式。代碼如下:
p { border-bottom: 1px solid #000; text-decoration: none; }
兩種方法都可以實現劃掉文字的效果,具體使用哪一種取決于實際需求。需要注意的是,如果要對某些特定的文本進行劃掉,可以使用標簽,如下:
普通文本要被劃掉的文本普通文本
.delete { text-decoration: line-through; }
使用上述代碼,只有delete類的文本會被劃掉,其它文本不受影響。
下一篇css中列表并排