CSS渐变边框如何只在左右两侧显示？

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

.gradient-border {
  position: relative;
  width: 200px;
  height: 100px;
  background-color: #f0f0f0;
}

.gradient-border::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
  background: linear-gradient(to right, #ff7e5f, #feb47b);
  mask: linear-gradient(to right, transparent 0%, transparent 10%, black 10%, black 90%, transparent 90%, transparent 100%);
}

解释：

1. .gradient-border: 这是你的容器元素，设置了宽度、高度和背景颜色。
2. ::before 伪元素: 这个伪元素用于创建渐变背景。
   • content: '': 伪元素必须要有内容，即使为空。
   • position: absolute: 使伪元素覆盖整个容器。
   • top: 0; left: 0; right: 0; bottom: 0: 使伪元素覆盖整个容器。
   • z-index: -1: 将伪元素放在容器内容的后面。
   • background: linear-gradient(to right, #ff7e5f, #feb47b): 设置渐变背景。
   • mask: linear-gradient(...): 使用 mask 属性来裁剪渐变背景，只在左右两侧显示。mask 属性中的 linear-gradient 定义了哪些部分是可见的（黑色部分），哪些部分是透明的（透明部分）。

结果：

• 渐变背景将只在容器的左右两侧显示，中间部分将保持透明。

注意事项：

• mask 属性在现代浏览器中支持较好，但在一些旧版浏览器中可能不支持。如果需要兼容性更好的解决方案，可以考虑使用 clip-path 或其他方法。

希望这个解决方案对你有帮助！