用css设置删除线样式的方法

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

创新互联-专业网站定制、快速模板网站建设、高性价比望奎网站开发、企业建站全套包干低至880元,成熟完善的模板库,直接使用。一站式望奎网站制作公司更省心,省钱,快速模板网站建设找我们，业务覆盖望奎地区。费用合理售后完善，十载实体公司更值得信赖。

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

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

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

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

    
    
    


    

        
这里有一个删除线
       

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

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

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

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

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

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

    
    
    


    

        
原价：500元

        现价：150元
        
       

如下图：

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

本文标题：用css设置删除线样式的方法
分享路径：http://scjbc.cn/article/ghccss.html