css 边框渐变

/* 使用 CSS 实现边框渐变效果 */

.border-gradient {
  /* 设置宽度和高度 */
  width: 200px;
  height: 200px;

  /* 使用 before 伪元素创建一个渐变边框 */
  position: relative;
}

.border-gradient::before {
  content: '';
  position: absolute;
  top: -10px;
  right: -10px;
  bottom: -10px;
  left: -10px;
  border-radius: inherit;

  /* 使用线性渐变设置边框颜色 */
  background: linear-gradient(to right, #ff7e5f, #feb47b);

  /* 设置边框的粗细 */
  padding: 5px;

  /* 创建一个剪辑区域，只显示边框部分 */
  -webkit-mask: 
    linear-gradient(#fff 0 0) content-box, 
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
}

解释说明：

1. .border-gradient 类：定义了一个容器，并设置了宽度和高度。
2. ::before 伪元素：通过 ::before 伪元素创建了一个额外的层来实现渐变边框。这个伪元素被定位在父元素的外部，以确保它不会影响内容区域。
3. linear-gradient：使用了线性渐变来生成从左到右的颜色过渡。
4. -webkit-mask 和 mask-composite：这些属性用于创建一个剪辑区域，使得只有边框部分可见，而内部的内容区域保持透明。

这样就可以实现一个带有渐变效果的边框。