实现边框渐变效果

实现思路：定义一个具有相对定位、白色背景和透明边框的元素。边框宽度为3像素，并且有20像素的圆角。通过background-clip: padding-box;确保背景不会延伸到边框之外。

使用一个伪元素&::before来创建一个渐变边框。这个伪元素被放置在主元素的外部，通过绝对定位和负边距与主元素的边框对齐。渐变背景从左边的蓝色（rgba(7, 77, 255, 1)）过渡到右边的绿色（rgba(178, 239, 188, 0.96)），并且也有20像素的圆角。z-index: -1;确保这个渐变边框位于内容的下方，作为背景存在。

.box{
    position: relative;
    background: #fff;
    border: 3px solid transparent; /* 增加边框宽度 */
    border-radius: 20px; /* 确保边框有圆角 */
    background-clip: padding-box; /* 使背景不覆盖边框 */

    /* 伪元素用于创建渐变边框 */
    &::before {
      content: "";
      position: absolute;
      top: -3px; /* 与边框宽度匹配 */
      left: -3px; /* 与边框宽度匹配 */
      right: -3px; /* 与边框宽度匹配 */
      bottom: -3px; /* 与边框宽度匹配 */
      border-radius: 20px; /* 确保伪元素有圆角 */
      background: linear-gradient(
        to right,
        rgba(7, 77, 255, 1),
        rgba(178, 239, 188, 0.96)
      );
      z-index: -1; /* 确保在背景下 */
    }



}

最终效果：