/* 基本语法 */ text-decoration: line-through; /* 详细语法 */ text-decoration: line-through color style;
其中,基本语法中的 line-through 表示文本划掉效果,即将文本划掉;详细语法可以定义划掉线的颜色和样式。常见的样式有:solid(实线)、dashed(虚线)、dotted(点线)等。
/* 示例代码 */ p { text-decoration: line-through red dashed; }
在上面的示例代码中,p 标签的文本会被划掉,划掉线颜色为红色,划掉线样式为虚线。
需要注意的是,在一些浏览器中,如果文本中含有下划线,同时又出现了文本划掉效果,那么下划线会被划掉线覆盖。此时,需要使用 border-bottom 属性来为文本添加下划线。
/* 解决下划线被划掉的问题 */ p { text-decoration: line-through red dashed; border-bottom: 1px solid black; }
上面的示例代码中,为文本添加了一个 1px 粗的黑色下划线。
总之,通过使用 text-decoration 属性,可以轻松地实现文本划掉效果。需要注意颜色和样式的细节,以及可能出现的下划线被覆盖问题。