DIV+CSS教程：[7]顶划线、下划线、删除线

时间：2024-10-21 08:14:42

1、在电子商务网站中，我们常常看到很促销的商品，如促销的商品的原价打上删除线，如下图所示，这种效果其实可以通过CSS中删除线控制实现。

2、那么CSS是如何实现的呢？其实CSS是通过text-decoration属性进行设置，除了删除线，还可以实现下划线、顶划线。

3、text-decoration:underline; 下划线text-decoration:overline; 顶划线text-decoration:line-through; 删除线text-decoration:blink; 闪烁但是闪烁在IE浏览器中并不支持这个效果，所以建议不要使用。

4、测试案例：<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>

5、如果希望一段文字不仅有下划线、删除线还有顶划线，那么他们各个值用空格分开，text-decoration:underline overline line-through;

6、<html><head> <title>文亨蚂擤缚字下划线、顶划线、删除线同时有</title><style></style> </head><body> <p>文字下划线、顶划线、删除线</p> <p class="test">文字下划线、顶划线、删除线</p></body></html>运行效果显示