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

2025-10-17 18:41:40

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 class="two">顶划线文字测试

<p class="three">删除线文字测试

正常文字对比

</body>

</html>

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

5、如果希望一段文字不仅有下划线、删除线还有顶划线，那么他们各个值用空格分开，

text-decoration:underline overline line-through;

6、<html>

<head>

<title>文字下划线、顶划线、删除线同时有</title>

<style>

<!--

.test{ text-decoration:underline overline line-through; } /* 三种同时 */

-->

</style>

</head>

<body>

文字下划线、顶划线、删除线

<p class="test">文字下划线、顶划线、删除线

</body>

</html>

运行效果显示

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

声明：本网站引用、摘录或转载内容仅供网站访问者交流或参考，不代表本站立场，如存在版权或非法内容，请联系站长删除，联系邮箱：site.kefu@qq.com。