用css设置删除线样式的方法-创新互联

这篇文章主要介绍用css设置删除线样式的方法，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！

创新互联建站基于成都重庆香港及美国等地区分布式IDC机房数据中心构建的电信大带宽，联通大带宽，移动大带宽，多线BGP大带宽租用,是为众多客户提供专业成都移动服务器托管报价，主机托管价格性价比高，为金融证券行业服务器托管，ai人工智能服务器托管提供bgp线路100M独享，G口带宽及机柜租用的专业成都idc公司。

相信大家在浏览各大商城网站时，都会看到一些关于产品促销的效果，比如某个产品的原价标记为多少，现价又改成了多少，并且为了用户发现更直观的差距，通常会在原价上添加一个明显的删除线！

当然除了商城网站上会出现这样的效果，在我们普通网站或者论坛站上，为了更美观更简洁得展现网站内容，也会使用css实现删除线效果！

那么如何使用css实现删除线样式呢？

下面我们通过简单的代码示例，为大家详细解说关于css删除线的实现方法！

    
    
    


    

        
这里有一个删除线
       

通过浏览器访问，css删除线实现效果如下图：

这里主要用到css中的text-decoration：line-through样式属性。

首先大家应该都知道text-decoration 属性是规定添加到文本的修饰。

而值为line-through则表示定义穿过文本下的一条线。

在上述代码中我们结合了text-decoration：line-through；和样式定义文本字体颜色的样式，来实现删除线与文字颜色不一的样式效果！

同理我们也可以轻松的实现原价现价的相关效果：

    
    
    


    

        
原价：500元

        现价：150元
        
       

如下图：

以上是用css设置删除线样式的方法的所有内容，感谢各位的阅读！希望分享的内容对大家有帮助，更多相关知识，欢迎关注创新互联网站制作公司行业资讯频道！

当前标题：用css设置删除线样式的方法-创新互联
浏览地址：http://mswzjz.cn/article/dpeoph.html