css渐变边框

/* 渐变边框的实现 */

/* 使用伪元素 ::before 或 ::after 来创建渐变边框 */
.box {
  position: relative;
  width: 200px;
  height: 200px;
  background-color: white;
}

.box::before {
  content: '';
  position: absolute;
  top: -10px;
  left: -10px;
  right: -10px;
  bottom: -10px;
  border-radius: 10px;
  /* 使用线性渐变来设置边框 */
  background: linear-gradient(45deg, #ff6f61, #eeaeca, #ada996, #fafae7);
  z-index: -1;
  /* 使用 box-shadow 创建一个内边距效果，使内容区域与渐变边框分离 */
  box-shadow: 0 0 0 10px white inset;
}

解释说明：

1. 伪元素：我们使用了 ::before 伪元素来创建一个覆盖在 .box 元素上的渐变边框。这样可以避免直接修改 .box 的样式。
2. 绝对定位：通过 position: absolute 和 top, left, right, bottom 属性，使得伪元素相对于 .box 进行定位，并且扩展出一个更大的区域用于显示边框。
3. 渐变背景：使用 linear-gradient 函数为伪元素设置了一个从左上到右下的线性渐变背景色。
4. 圆角：通过 border-radius 设置了圆角，使边框看起来更加美观。
5. 内阴影：使用 box-shadow 的 inset 关键字创建了一个内边距效果，确保内容区域与渐变边框之间有一定的间距。