css 渐变边框

/* 渐变边框示例代码 */

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

解释说明：

• .box 是一个基础的容器，设置了宽度、高度和边框。
• 使用 ::before 伪元素来创建一个覆盖在 .box 外部的渐变效果。通过设置 position: absolute 和负的 top, left, right, bottom 值，使伪元素包围 .box。
• background: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet); 定义了一个从左到右的线性渐变背景色。
• z-index: -1; 确保渐变背景不会覆盖 .box 的内容。
• border-radius: inherit; 继承 .box 的圆角设置，确保边框的圆角与 .box 一致。

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