边框渐变
方案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%);