HTML和css怎么实现价格中间贯穿删除线效果

# HTML和CSS怎么实现价格中间贯穿删除线效果

在电商网站或促销页面中，我们经常需要展示商品的原价和折扣价，其中原价通常会使用贯穿删除线（Strikethrough）效果。本文将详细介绍5种实现价格删除线的方法，从基础HTML标签到高级CSS技巧。

## 方法一：使用`<s>`或`<del>`标签（语义化推荐）

```html
<p>
  <del>原价：¥999</del> 
  <span class="price">促销价：¥599</span>
</p>

优点： - 语义化标签，对SEO友好 - 无需额外CSS代码 - 默认样式在各浏览器中表现一致

缺点： - 删除线样式固定不可自定义

方法二：使用CSS text-decoration属性

<span class="original-price">¥999</span>

.original-price {
  text-decoration: line-through;
  color: #999;
}

进阶样式控制：

.original-price {
  text-decoration: line-through;
  text-decoration-color: red;       /* 线条颜色 */
  text-decoration-thickness: 2px;   /* 线条粗细 */
  text-decoration-style: double;    /* 双线效果 */
}

方法三：伪元素实现（高度自定义）

当需要完全控制删除线的位置和样式时：

.strikethrough {
  position: relative;
  display: inline-block;
}

.strikethrough::after {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 100%;
  height: 2px;
  background: red;
  transform: rotate(-5deg); /* 倾斜效果 */
}

方法四：线性渐变背景法

.gradient-strike {
  background: linear-gradient(transparent 45%, red 45%, red 55%, transparent 55%);
}

适用场景： - 需要虚线删除线时 - 需要渐变颜色的删除线

方法五：SVG内联实现

<span class="svg-strike">
  ¥999
  <svg width="100%" height="100%" viewBox="0 0 100 10">
    <line x1="0" y1="5" x2="100" y2="5" stroke="red" stroke-width="2"/>
  </svg>
</span>

.svg-strike {
  position: relative;
  display: inline-block;
}
.svg-strike svg {
  position: absolute;
  left: 0;
  top: 50%;
}

综合对比表

实际应用案例

电商价格展示组件：

<div class="price-container">
  <span class="original-price">
    <span class="currency">¥</span>
    <span class="amount">1299</span>
  </span>
  <span class="current-price">
    <span class="currency">¥</span>
    <span class="amount">899</span>
  </span>
</div>

.original-price {
  position: relative;
  margin-right: 10px;
  color: #999;
}

.original-price::after {
  content: "";
  position: absolute;
  left: 0;
  top: 55%;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform: rotate(-3deg);
}

.current-price {
  color: #f44336;
  font-size: 1.2em;
  font-weight: bold;
}

浏览器兼容性注意事项

1. text-decoration-style仅支持现代浏览器
2. 伪元素方案在移动端可能出现模糊问题
3. 考虑使用autoprefixer添加CSS前缀

扩展知识

无障碍访问建议：

<p>
  <span aria-label="原价999元，特价599元">
    <span class="sr-only">原价</span>
    <del>¥999</del>
    <span class="sr-only">现价</span>
    <span>¥599</span>
  </span>
</p>

通过组合使用这些技术，可以创建出既美观又符合语义的价格展示效果。根据项目需求选择最适合的实现方案。 “`

文章包含了850字左右的内容，采用Markdown格式，包含： 1. 多种实现方法 2. 代码示例 3. 对比表格 4. 实际案例 5. 兼容性提示 6. 无障碍建议 7. 各级标题结构