如何用CSS实现仅在左右两侧显示渐变边框效果？

要在元素的左右两侧显示渐变边框效果，可以使用CSS的伪元素（::before 和 ::after）来实现。以下是一个示例代码：

.gradient-border {
    position: relative;
    width: 300px; /* 设置元素的宽度 */
    height: 200px; /* 设置元素的高度 */
    background-color: #f0f0f0; /* 设置元素的背景颜色 */
}

.gradient-border::before,
.gradient-border::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 5px; /* 设置边框的宽度 */
    background: linear-gradient(to bottom, #ff7e5f, #feb47b); /* 设置渐变颜色 */
}

.gradient-border::before {
    left: 0;
}

.gradient-border::after {
    right: 0;
}

解释：

1. .gradient-border: 这是你要应用渐变边框效果的元素。你可以根据需要调整宽度、高度和背景颜色。

2. ::before 和 ::after: 这两个伪元素分别用于创建左右两侧的渐变边框。

3. position: absolute;: 将伪元素定位到父元素的左右两侧。

4. width: 5px;: 设置边框的宽度。

5. background: linear-gradient(to bottom, #ff7e5f, #feb47b);: 设置渐变的颜色。你可以根据需要调整颜色和渐变方向。

6. left: 0; 和 right: 0;: 分别将伪元素定位到父元素的左侧和右侧。

示例HTML：

<div class="gradient-border">
    <!-- 内容 -->
</div>

结果：

这个代码会在 .gradient-border 元素的左右两侧分别显示一个宽度为5px的渐变边框。

你可以根据需要调整渐变的颜色、方向和边框的宽度。