举例说明实现文字贯穿线的方法有哪些?

163 阅读1分钟

"- CSS 边框方式:

.text-line-through {
  text-decoration: line-through;
}
  • CSS 伪元素方式:
.text-line-through::after {
  content: \"\";
  position: absolute;
  bottom: 50%;
  left: 0;
  right: 0;
  border-top: 1px solid;
}
  • CSS 线性渐变方式:
.text-line-through {
  background-image: linear-gradient(to right, transparent 50%, black 50%);
  background-size: 200% 100%;
  background-position: right bottom;
  background-repeat: no-repeat;
}
  • JavaScript 方式:
<span id=\"text\">Hello, world!</span>

<script>
  var text = document.getElementById(\"text\");
  text.style.textDecoration = \"line-through\";
</script>
  • SVG 方式:
<svg width=\"100\" height=\"100\" xmlns=\"http://www.w3.org/2000/svg\">
  <line x1=\"0\" y1=\"50%\" x2=\"100%\" y2=\"50%\" stroke=\"black\" />
</svg>
  • Canvas 方式:
<canvas id=\"canvas\" width=\"100\" height=\"100\"></canvas>

<script>
  var canvas = document.getElementById(\"canvas\");
  var ctx = canvas.getContext(\"2d\");
  ctx.moveTo(0, 50);
  ctx.lineTo(100, 50);
  ctx.stroke();
</script>
  • HTML <del> 标签方式:
<del>Hello, world!</del>

这些是实现文字贯穿线的常用方法,可以根据具体的需求和场景选择合适的方式来实现。"