如何用css设置删除线样式？

时间2024-05-20 23:28:04发布访客分类CSS浏览36

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

相信大家在浏览各大商城网站时，都会看到一些关于产品促销的效果，比如某个产品的原价标记为多少，现价又改成了多少，并且为了用户发现更直观的差距，通常会在原价上添加一个明显的删除线！当然除了商城网站上会出现这样的效果，在我们普通网站或者论坛站上，为了更美观更简洁得展现网站内容，也会使用css实现删除线效果！那么如何使用css实现删除线样式呢？下面我们通过简单的代码示例，为大家详细解说关于css删除线的实现方法！ css删除线 .demo{ text-decoration:line-through; color:red; } span{ color:black; }

这里有一个删除线

通过浏览器访问，css删除线实现效果如下图： 009b6b898c6a53b94e6b75d5abb1066.png 这里主要用到css中的text-decoration：line-through样式属性。首先大家应该都知道text-decoration属性是规定添加到文本的修饰。而值为line-through则表示定义穿过文本下的一条线。在上述代码中我们结合了text-decoration：line-through；和样式定义文本字体颜色的样式，来实现删除线与文字颜色不一的样式效果！同理我们也可以轻松的实现原价现价的相关效果： css删除线 .demo{ text-decoration:line-through; color:red; } span{ color:black; }

原价：500元
现价：150元

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！

若转载请注明出处：如何用css设置删除线样式？
本文地址： https://pptw.com/jishu/664477.html

编程好考什么大学内网访问云服务器异常怎么解决