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. 各級標題結構