css边框渐变色

/* CSS边框渐变色示例 */

/* 使用伪元素实现边框渐变色 */
.element {
  position: relative;
  padding: 20px;
  background-color: #fff;
}

.element::before {
  content: '';
  position: absolute;
  top: -2px;
  right: -2px;
  bottom: -2px;
  left: -2px;
  border-radius: 5px;
  pointer-events: none;
  /* 渐变色边框 */
  background: linear-gradient(to right, #ff7e5f, #feb47b);
  /* 设置边框的宽度 */
  mask: 
    linear-gradient(#fff 0 0) content-box, 
    linear-gradient(#fff 0 0);
  mask-composite: xor;
}

解释说明：

1. 伪元素 ::before：我们使用 ::before 伪元素来创建一个覆盖在元素外部的层，用于实现渐变色边框。
2. mask 和 mask-composite：通过 mask 属性和 mask-composite: xor 来裁剪出边框区域，使得背景渐变只显示在边框部分。
3. linear-gradient：定义了从左到右的线性渐变色，颜色从 #ff7e5f 到 #feb47b。

这种方式可以实现非常灵活且美观的渐变色边框效果。