css border 渐变色

/* 使用 CSS 渐变色设置边框 */

/* 示例 1: 线性渐变 */
.element {
  border: 2px solid;
  /* 边框颜色使用线性渐变，从左到右，从红色到蓝色 */
  border-image: linear-gradient(to right, red, blue) 1;
}

/* 示例 2: 径向渐变 */
.element {
  border: 2px solid;
  /* 边框颜色使用径向渐变，从中心向外，从黄色到紫色 */
  border-image: radial-gradient(yellow, purple) 1;
}

/* 示例 3: 角度渐变 */
.element {
  border: 2px solid;
  /* 边框颜色使用角度渐变，从45度方向，从绿色到橙色 */
  border-image: linear-gradient(45deg, green, orange) 1;
}

解释说明：

• border-image 属性用于为边框应用图像或渐变。在这里我们使用了渐变来创建彩色边框。
• linear-gradient() 函数创建一个线性渐变，可以指定方向（如 to right 或 45deg）和颜色变化。
• radial-gradient() 函数创建一个径向渐变，颜色从中心向外扩散。
• border-image-slice: 1; 表示将渐变应用到整个边框宽度。

如果你需要更复杂的渐变效果，可以通过调整渐变的方向、颜色停止点等参数来自定义样式。