边框渐变
方案1: 边框渐变( 支持圆角)
width: 726px;
height: 144px;
border-radius: 24px;
border: 5px solid transparent;
background-clip: padding-box, border-box;
background-origin: padding-box, border-box;
background-image: linear-gradient(to right, #fff, #fff), linear-gradient(100deg, rgba(86, 199, 255, 1), rgba(255, 255, 255, 0));
效果如图:
边框渐变(border-image不支持圆角)
width: 726px;
height: 144px;
border-radius: 24px;
border: 5px solid;
background: #fff;
border-image: linear-gradient(100deg, rgba(86, 199, 255, 1), rgba(255, 255, 255, 0)) 5 5;
效果如图:
加上属性后clip-path: inset(0 round 24px);,支持圆角,但圆角的渐变色有缺失,如下图:
字体颜色渐变
背景色渐变
background: linear-gradient(#6AF1D0 0%, #B6FFFA 40%, #B9EBFF 100%);