html中删除线的颜色,文本里如何使用CSS定义不同颜色删除线？_html_开发99编程知识库...

这是一个使用渐变来伪装线条的方法。 它适用于多行攻击&＃xff0c;不需要额外的DOM元素。 但因为它是背景渐变&＃xff0c;它在文本的后面。。del, strike {

text-decoration: none;

line-height: 1.4;

background-image: -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(0.63em, transparent), color-stop(0.63em, #ff0000), color-stop(0.7em, #ff0000), color-stop(0.7em, transparent), to(transparent));

background-image: -webkit-linear-gradient(top, transparent 0em, transparent 0.63em, #ff0000 0.63em, #ff0000 0.7em, transparent 0.7em, transparent 1.4em);

background-image: -o-linear-gradient(top, transparent 0em, transparent 0.63em, #ff0000 0.63em, #ff0000 0.7em, transparent 0.7em, transparent 1.4em);

background-image: linear-gradient(to bottom, transparent 0em, transparent 0.63em, #ff0000 0.63em, #ff0000 0.7em, transparent 0.7em, transparent 1.4em);

-webkit-background-size: 1.4em 1.4em;

background-size: 1.4em 1.4em;

background-repeat: repeat;

}

渐变color-stops和背景大小取决于 line-height 。 ( 我使用 LESS 进行计算和Autoprefixer之后。。)