css 设置元素渐变色边框 完整示例代码

在CSS中设置元素的渐变色边框，你可以使用 `linear-gradient` 或者 `radial-gradient` 函数结合 `border-image` 属性。下面给出一个完整的示例代码：

/* CSS 全局样式 */
body {
  margin: 0;
  padding: 0;
}

/* 选择一个元素并为其添加线性渐变边框 */
.gradient-box {
  width: 200px;
  height: 200px;
  border: 10px solid transparent; /* 确保留出空间给渐变颜色 */
  background-color: #fff; /* 如果没有内容，可以先填充背景色 */
  border-image:
      linear-gradient(to right, red, orange) 1,
      linear-gradient(to bottom, yellow, green) 2,
      linear-gradient(to top left, blue, indigo) 3,
      linear-gradient(to top right, violet, purple) 4 stretch; /* 这里我们有四个方向的渐变 */
}

/* 为了兼容非标准浏览器，添加 WebKit 前缀 */
@media (-webkit-min-device-pixel-ratio: 0) {
  .gradient-box {
    border-image-slice: 1 / 4;
  }
}

这个例子中，`.gradient-box` 类会有一个四面渐变的边框，每一边的颜色和方向都是自定义的。`stretch` 则用于拉伸渐变到整个边框。