如何用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);: 设置渐变背景，to bottom 表示从上到下的渐变，颜色可以根据需要调整。

HTML 结构：

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

效果：

• 这个容器将显示左右两侧的渐变边框，而上下边框不会显示。

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