css3实现边框渐变圆角的两种方式

border-image可以实现渐变边框，但是border-radius就不生效了，所以想实现渐变圆角边框很蛋疼

方式一：使用伪元素+mask属性

优点： 不需要添加额外元素，不影响布局
缺点： mask兼容性较差

.linear-radius-border {
  width: 400px;
  height: 200px;
  border-radius: 10px;
  position: relative;
  &::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: inherit; /* 继承父元素的圆角 */
    padding: 1px; /* 边框宽度 */
    box-sizing: border-box; /* 使 padding 不影响实际大小 */
    background: linear-gradient(45deg, #5ecbff, #5a78ff, #64f4ff, #58688a); /* 渐变色 */
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); /* 遮罩 */
    -webkit-mask-composite: destination-out; /* 将两个渐变叠加 */
    mask-composite: exclude; /* 将两个渐变叠加 */
  }
}

方式二：背景叠加

优点： 需要添加内外元素
缺点： 兼容性好

<div class="outside">
 <div class="inner"></div>
</div>
<style>
 .outside {
   width: 400px;
   height: 200px;
   position: relative;
   background: linear-gradient(45deg, #5ecbff, #5a78ff, #64f4ff, #58688a); /* 渐变色 */
   border-radius: 10px;
 }
 .inner {
   position: absolute;
   top: 1px; /* 边框宽度 */
   left: 1px; /* 边框宽度 */
   right: 1px; /* 边框宽度 */
   bottom: 1px; /* 边框宽度 */
   background: #fff;
   border-radius: 10px;
 }
</style>