css border 渐变

/* 使用 CSS 渐变作为边框的示例 */

/* 定义一个带有渐变边框的 div */
.div-with-gradient-border {
  width: 200px;
  height: 200px;
  border: 5px solid;
  /* 使用 ::before 伪元素来创建渐变边框 */
  position: relative;
}

.div-with-gradient-border::before {
  content: '';
  position: absolute;
  top: -5px;
  left: -5px;
  right: -5px;
  bottom: -5px;
  background: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);
  z-index: -1;
  border-radius: inherit;
}

解释说明：

1. div-with-gradient-border：这是一个普通的 div，我们通过设置它的宽度和高度来定义其大小，并使用 border 属性来创建一个基础边框。
2. ::before 伪元素：为了实现渐变边框的效果，我们使用了 ::before 伪元素。这个伪元素被放置在 div 的外部，并且通过 absolute 定位来确保它完全包裹住 div。
3. linear-gradient：这是 CSS 中用于创建线性渐变的函数。在这个例子中，渐变从左到右依次经过红、橙、黄、绿、蓝、靛、紫七种颜色。
4. z-index: -1：将伪元素放在 div 的后面，以确保渐变边框不会覆盖 div 的内容。
5. border-radius: inherit：如果 div 有圆角，伪元素也会继承相同的圆角效果。

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