css价格中间带分割线

### 使用 CSS 实现价格中间带分割线的样式

为了实现价格中间带有分割线的效果，可以采用两种不同的方法来满足需求。一种是通过简单的 HTML 和 CSS 结构创建一条贯穿整个容器宽度的水平线，并在其中放置一段文本；另一种则是利用 `linear-gradient` 创建具有视觉冲击力的渐变效果。

#### 方法一：简单的价格分割线

此方法适用于希望保持简洁设计的情况：

<div class="price-line">
    <span class="price-text">¥99</span>
</div>

.price-line {
    height: 0;
    border-top: 1px solid #ccc; /* 设置分割线颜色 */
    text-align: center;
}

.price-text {
    position: relative;
    top: -1em; /* 调整文字位置使其覆盖分割线 */
    background-color: white; /* 确保背景色与页面底色一致 */
}

这种方法能够有效地将价格置于一条横跨整个区域的线上方[^1]。

#### 方法二：高级的价格分割线（带高亮）

如果想要更吸引人的外观，则可考虑如下方案：

<div class="highlighted-price-container">
    <p>原价：<del>¥120</del></p>
    <p class="current-price"><strong>现价：</strong><span class="highlighted-price">¥99</span></p>
</div>

<!-- 添加额外的 div 来展示特殊的分隔符 -->
<div class="special-divider"></div>

.highlighted-price-container p {
    display: inline-block;
    margin-right: 1rem;
}

.current-price strong {
    color: red;
}

.special-divider {
    width: calc(100% - 150px); /* 根据实际布局调整宽度 */
    height: 2px;
    background: linear-gradient(
        to right,
        rgba(0, 0, 0, 0) 0%,
        rgba(0, 0, 0, 0) 30%,
        rgba(255, 165, 0, 0.7) 50%, /* 中间部分的颜色可以根据需要更改 */
        rgba(0, 0, 0, 0) 70%,
        rgba(0, 0, 0, 0) 100%
    );
    margin-left: auto;
    margin-right: auto;
}

.highlighted-price {
    font-size: larger;
    padding-bottom: .5em;
}

这里使用了 `linear-gradient` 函数定义了一个从透明到橙色调再回到透明的过渡效果，使得中央部分显得更加突出[^2]。

这两种方式都可以很好地达到显示价格并附有装饰性的目的，具体选择取决于项目的设计风格和个人偏好。