css border 渐变色

CSS中可以使用border-image来实现边框的渐变色效果。通过设置border-image属性，可以使用线性渐变、径向渐变或者图像来定义边框的样式。同时，还可以通过background-clip、background-origin和background-image属性来实现背景的渐变色效果。

以下是三种常见的实现方法：
1. 使用border-image属性：通过设置border-image属性的值为线性渐变或者径向渐变，可以实现边框的渐变色效果。例如：

.box {
  width: 200px;
  height: 200px;  border: 10px solid #ddd;
  border-image: linear-gradient(rgb(89, 0, 255), pink) 30 30;
}

2. 使用background-clip、background-origin和background-image属性：通过设置这三个属性，可以在背景中实现渐变色效果。例如：

.border-box {
  border: 5px solid transparent;  border-radius: 15px;
  background-clip: padding-box, border-box;
  background-origin: padding-box, border-box;
  background-image: linear-gradient(to right, #222, #222), linear-gradient(90deg, #8F41E9, #578AEF);
}

3. 使用background-image属性：通过设置background-image属性的值为线性渐变，可以实现容器背景的渐变色效果。例如：

.box1 {
  width: 200px;
  height: 200px;
  box-sizing: border-box;
  padding: 10px;
  border-radius: 50%;
  background-image: linear-gradient(top, pink 0%, blue 30%, yellow 60%, green 90%);
}
.box2 {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: #fff;
}