如何用css设计删除线条

在网页设计中，删除线是一种常见的文本效果，它可以使文本看起来被划掉或者不再有效，在CSS中，我们可以使用text-decoration属性来添加删除线。

1. 基本用法

在CSS中，text-decoration属性用于设置或检索应用于元素文本的装饰效果，它有四个值：none、underline、overline和line-through。line-through就是删除线。

如果我们想要一个段落的文本显示为删除线，我们可以这样写：

p {
  text-decoration: line-through;
}

这段代码会使页面上所有的段落文本都显示为删除线。

2. 颜色和粗细

除了基本的删除线效果，我们还可以通过text-decoration-color属性来改变删除线的颜色，通过text-decoration-thickness属性来改变删除线的粗细。

如果我们想要一个段落的文本显示为红色、粗体的删除线，我们可以这样写：

p {
  text-decoration: line-through;
  text-decoration-color: red;
  text-decoration-thickness: 2px;
}

这段代码会使页面上所有的段落文本都显示为红色、粗体的删除线。

3. 文字间隔

我们可能希望删除线之间的文字有一定的间隔，这时我们可以使用letter-spacing属性来实现。

如果我们想要一个段落的文本显示为删除线，并且删除线之间的文字有一定的间隔，我们可以这样写：

p {
  text-decoration: line-through;
  letter-spacing: 0.5em;
}

这段代码会使页面上所有的段落文本都显示为删除线，并且删除线之间的文字有一定的间隔。

4. 兼容性问题

需要注意的是，虽然大多数现代浏览器都支持text-decoration属性，但是一些旧版本的浏览器可能不支持line-through值，在这种情况下，我们可以使用一些替代的方法来实现删除线效果，例如使用背景图片或者伪元素。

我们可以使用伪元素和background-image属性来实现删除线效果：

p::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform: scaleX(1);
  bottom: 0;
}
p::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform: scaleX(1);
  top: 0;
}
p {
  color: transparent; /* Make the text transparent */
  background-image: linear-gradient(to right, white, white), linear-gradient(to right, white, white); /* Create the line effect */
  background-size: 1px 100%, 1px 100%; /* Set the size of the lines */
  background-repeat: no-repeat; /* Don't repeat the lines */
}

这段代码会使页面上所有的段落文本都显示为删除线，这种方法的兼容性更好，可以在所有浏览器中正常工作。