常用的CSS渐变样式

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

你可能感兴趣的:(css,前端)