如何使用CSS斜体划掉文本。

11 浏览
0 Comments

如何使用CSS斜体划掉文本。

我需要类似这样的效果：\n\"\"\n如何使用CSS实现这个效果？我知道一种方法是使用背景图像，但是能否只使用CSS而不需要任何图像来实现这个效果？

0

3 答案

0 Comments

如何使用CSS斜划线

在网页设计中，有时候我们需要在文本中添加斜划线来表示删除或过时的内容。然而，CSS中并没有直接提供斜划线的属性。下面我们将介绍一个使用CSS实现斜划线的方法。

问题的出现原因：

CSS中没有直接提供斜划线的属性，因此我们需要通过其他方式来实现。

解决方法：

通过CSS伪元素和一些属性来实现斜划线。

首先，我们需要为要添加斜划线的文本设置一个del标签，并为其设置position:relative和text-decoration:none属性。

然后，我们使用伪元素::after来创建一个绝对定位的元素，并为其设置position:absolute、top:50%、left:0、width:100%和height:1px属性。这将创建一个宽度为100%、高度为1px的横线。

接下来，我们设置background属性为黑色，这将使横线呈现出斜划线的效果。

最后，我们使用transform:rotate(-7deg)来将横线旋转-7度，使其呈现斜划线的效果。

通过以上的CSS代码，我们就可以实现在文本中添加斜划线的效果。

以下是完整的CSS代码示例：

del {
  position:relative;
  text-decoration:none;
}
del::after {
  content:"";
  position:absolute;
  top:50%; left:0; width:100%; height:1px; 
  background:black;
  transform:rotate(-7deg);
}

0
0 Comments

CSS如何使用斜体中划线

有时候我们需要在网页中使用斜体中划线来突出一些文本内容，但是在CSS中，默认情况下并没有提供斜体中划线的样式。下面我们将介绍两种方法来实现这个效果。

方法一：使用背景渐变

我们可以使用背景渐变的方式来实现斜体中划线的效果，同时可以避免硬编码字体颜色。具体代码如下：

.strikediag {
  background: linear-gradient(to left top, transparent 47.75%, currentColor 49.5%, currentColor 50.5%, transparent 52.25%);
}
.withpadding {
  padding: 0 0.15em;
}


The value is 2x 3x
The number is 1234567890.


The value is 2x 3x
The number is 1234567890.

方法二：使用伪元素

如果不需要元素完全内联，我们可以使用伪元素来在元素上方绘制斜体中划线。通过调整伪元素的大小，可以改变斜线的角度。具体代码如下：

.strikediag {
  display: inline-block;
  position: relative;
}
.strikediag::before {
  content: '';
  position: absolute;
  left: -0.1em;
  right: -0.1em;
  top: 0.38em;
  bottom: 0.38em;
  background: linear-gradient(to left top, transparent 45.5%, currentColor 47.5%, currentColor 52.5%, transparent 54.5%);
  pointer-events: none;
}


The value is 2x 3x
The number is 1234567890.

通过以上两种方法，我们可以在CSS中实现斜体中划线的效果，使得文本内容更加突出。

0
0 Comments

如何用CSS斜划掉文本

有一种巧妙的方法可以实现这个效果，使用:before伪元素。给:before添加一个边框，然后通过CSS变换旋转它。通过这种方式，不会在DOM中添加额外的元素，添加/删除斜划线只需添加/删除类。

这种方法只适用于IE8及以下版本。IE7不支持:before，但在支持:before但不支持CSS变换的浏览器中，会有平稳降级的效果。

以下是CSS代码：

.strikethrough {
  position: relative;
}
.strikethrough:before {
  position: absolute;
  content: "";
  left: 0;
  top: 50%;
  right: 0;
  border-top: 1px solid;
  border-color: inherit;
  -webkit-transform:rotate(-5deg);
  -moz-transform:rotate(-5deg);
  -ms-transform:rotate(-5deg);
  -o-transform:rotate(-5deg);
  transform:rotate(-5deg);
}

以下是HTML代码：

<span class="strikethrough">删除的文本</span>

这种方法在IE8中可能不起作用，因为我不知道有没有类似transform的东西，除非可以使用filter。

是的，你说得对，抱歉。IE8会平稳降级为普通的划线。我应该把这个说明清楚。

嗨，我试图将这个效果应用到一个TD元素上，但在Firefox中似乎有些问题。有任何想法吗？谢谢。

请发布一个新的问题，而不是将您的问题放在评论中。

好的，已经发布了：stackoverflow.com/questions/18945031/…

还有一个需要考虑的问题是，如果文本换行成两行，则斜划线将无法按预期渲染。

0