![DIV+CSS教程：[7]顶划线、下划线、删除线](https://search.52zhanxing.com/aiimages/DIV+CSS教程：[7]顶划线、下划线、删除线.png)
操作方法
在电子商务网站中，我们常常看到很促销的商品，如促销的商品的原价打上删除线，如下图所示，这种效果其实可以通过CSS中删除线控制实现。
那么CSS是如何实现的呢？其实CSS是通过text-decoration属性进行设置，除了删除线，还可以实现下划线、顶划线。
text-decoration:underline; 下划线 text-decoration:overline; 顶划线 text-decoration:line-through; 删除线 text-decoration:blink; 闪烁 但是闪烁在IE浏览器中并不支持这个效果，所以建议不要使用。
测试案例： <html> <head> <title>文字下划线、顶划线、删除线</title> <style> .one{ text-decoration:underline; } .two{ text-decoration:overline; } .three{ text-decoration:line-through; } </style> </head> <body> <p class="one">下划线文字测试</p> <p class="two">顶划线文字测试</p> <p class="three">删除线文字测试</p> <p>正常文字对比</p> </body> </html>
如果希望一段文字不仅有下划线、删除线还有顶划线，那么他们各个值用空格分开， text-decoration:underline overline line-through;
<html> <head> <title>文字下划线、顶划线、删除线同时有</title> <style> <!-- .test{ text-decoration:underline overline line-through; } /* 三种同时 */ --> </style> </head> <body> <p>文字下划线、顶划线、删除线</p> <p class="test">文字下划线、顶划线、删除线</p> </body> </html> 运行效果显示