css 边框渐变色

/* 使用 CSS 渐变色创建边框 */

/* 示例 1: 线性渐变边框 */
.box {
  width: 200px;
  height: 200px;
  border: 5px solid;
  /* 使用伪元素实现渐变边框 */
  position: relative;
}

.box::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;
}

/* 示例 2: 圆角线性渐变边框 */
.rounded-box {
  width: 200px;
  height: 200px;
  border-radius: 20px;
  position: relative;
}

.rounded-box::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: 25px; /* 保持与父元素相同的圆角 */
}

/* 示例 3: 径向渐变边框 */
.radial-box {
  width: 200px;
  height: 200px;
  position: relative;
}

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

解释说明：

1. 线性渐变边框：通过 linear-gradient 函数创建一个从左到右的渐变色背景，并使用伪元素 ::before 来模拟边框效果。
2. 圆角线性渐变边框：在示例 1 的基础上，添加了 border-radius 属性，使得边框具有圆角效果。
3. 径向渐变边框：使用 radial-gradient 函数创建一个从中心向外扩散的渐变色背景，同样通过伪元素来实现边框效果。

这些示例展示了如何使用 CSS 渐变色来创建不同类型的边框效果。