边框渐变
方案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);，支持圆角，但圆角的渐变色有缺失，如下图：
字体颜色渐变文章来源：https://www.toymoban.com/news/detail-621261.html
背景色渐变
background: linear-gradient(#6AF1D0 0%, #B6FFFA 40%, #B9EBFF 100%);文章来源地址https://www.toymoban.com/news/detail-621261.html
到了这里，关于常用的CSS渐变样式的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
