css border渐变

/* CSS border 渐变示例 */

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

.element::before {
  content: '';
  position: absolute;
  top: -10px;
  right: -10px;
  bottom: -10px;
  left: -10px;
  border-radius: 10px;
  z-index: -1;
  /* 渐变边框 */
  background: linear-gradient(to right, #ff7e5f, #feb47b);
  /* 创建一个透明的内边框效果 */
  -webkit-mask: 
    linear-gradient(#fff 0 0) content-box, 
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  padding: 10px;
}

解释说明：

1. 伪元素 ::before：我们使用了伪元素来创建一个额外的层，这样可以避免直接修改原始元素的样式。
2. 渐变背景 background: linear-gradient：通过 linear-gradient 函数设置从左到右的渐变色。
3. 透明内边框效果 -webkit-mask：利用 mask 属性和 mask-composite 来创建一个透明的内边框效果，从而实现渐变边框的效果。

这种方式可以在不改变原有元素结构的情况下，轻松实现渐变边框的效果。