在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视频教程】
以上是css设置文字删除线的详细内容。更多信息请关注PHP中文网其他相关文章!