CSS 实现边框渐变

要在CSS中实现边框渐变效果，有几种常用方法：

1. 使用 border-image 属性

.gradient-border {
  border: 10px solid;
  border-image: linear-gradient(to right, red, blue) 1;
}

这种方法直接使用border-image属性，简单直接，但兼容性和灵活性有限。

2. 使用伪元素和背景渐变

这是最常用且兼容性较好的方法：

.gradient-border {
  position: relative;
  border: none; /* 移除原始边框 */
}

.gradient-border::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: inherit; /* 继承父元素的圆角 */
  padding: 2px; /* 控制边框厚度 */
  background: linear-gradient(to right, red, blue);
  -webkit-mask: 
    linear-gradient(#fff 0 0) content-box, 
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none; /* 确保不会干扰内部元素的点击事件 */
}

3. 使用多层元素

.gradient-border-container {
  position: relative;
  background: linear-gradient(to right, red, blue);
  padding: 3px; /* 边框厚度 */
}

.gradient-border-content {
  background: white; /* 内容区背景色 */
  height: 100%;
}

兼容性提示

• border-image 在旧浏览器可能不支持
• 伪元素方法的 mask-composite 需要添加前缀以提高兼容性
• 考虑为不支持这些属性的浏览器提供回退样式

希望这些方法能帮助你实现边框渐变效果！