### 使用
CSS 实现价格中间带
分割线的样式
为了实现价格中间带有
分割线的效果，可以采用两种不同的方法来满足需求。一种是通过简单的
HTML 和
CSS 结构创建
一条贯穿整个容器宽度的水平线，并在其中放置一段文本；另一种则是利用 `
linear-gradient` 创建具有视觉冲击力的
渐变效果。
#### 方法一：简单的价格
分割线
此方法适用于希望保持简洁设计的情况：
```
html
<div class="price
-line">
<span class="price
-text">¥99</span>
</div>
```
```
css
.price
-line {
height: 0;
border
-top: 1px solid #ccc; /* 设置
分割线颜色 */
text
-align: center;
}
.price
-text {
position: relative;
top:
-1em; /* 调整文字位置使其覆盖
分割线 */
background
-color: white; /* 确保背景色与页面底色一致 */
}
```
这种方法能够有效地将价格置于
一条横跨整个区域的线上方[^1]。
#### 方法二：高级的价格
分割线（带高亮）
如果想要更吸引人的外观，则可考虑如下方案：
```
html
<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>
```
```
css
.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]。
这两种方式都可以很好地达到显示价格并附有装饰性的目的，具体选择取决于项目的设计风格和个人偏好。
扫一扫
1491
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
