如何用CSS优雅地实现仅显示左右两侧的渐变边框？

要实现仅显示左右两侧的渐变边框，可以使用CSS的linear-gradient背景和::before或::after伪元素来实现。以下是一个优雅的实现方案：

HTML结构

假设你有一个div元素，你想要为其添加左右两侧的渐变边框：

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

CSS样式

.gradient-border {
  position: relative;
  padding: 20px; /* 根据需要调整内边距 */
  background-color: #fff; /* 背景颜色 */
}

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

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

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

解释

1. position: relative;: 使父元素成为相对定位的容器，以便伪元素可以相对于它进行定位。
2. ::before 和 ::after 伪元素: 这两个伪元素分别用于创建左右两侧的渐变边框。
3. position: absolute;: 使伪元素相对于父元素进行绝对定位。
4. top: 0; bottom: 0;: 使伪元素从顶部延伸到底部，覆盖整个高度。
5. width: 2px;: 设置边框的宽度。
6. background: linear-gradient(to bottom, #ff7e5f, #feb47b);: 使用线性渐变作为背景，to bottom表示从上到下的渐变方向，#ff7e5f和#feb47b是渐变的起始和结束颜色，你可以根据需要调整颜色。
7. left: 0; 和 right: 0;: 分别将伪元素定位到父元素的左侧和右侧。

结果

这个方案会在div元素的左右两侧分别添加一个从上到下的渐变边框，而不会影响元素的其他部分。你可以根据需要调整渐变的颜色、方向和边框的宽度。

注意事项

• 如果你需要支持较旧的浏览器（如IE），可能需要使用其他方法或添加兼容性代码，因为linear-gradient和伪元素在这些浏览器中可能不被完全支持。
• 如果你需要更复杂的边框效果（如圆角、阴影等），可以进一步扩展这个方案。