css设置字体渐变色以及背景颜色渐变色

（一）css设置字体渐变色

 background-image: -webkit-linear-gradient(left, red, yellow);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;

效果图：

语法：

/* 渐变轴为 45 度，从蓝色渐变到红色 */
linear-gradient(45deg, blue, red);

/* 从右下到左上、从蓝色渐变到红色 */
linear-gradient(to left top, blue, red);

/* 色标：从下到上，从蓝色开始渐变，到高度 40% 位置是绿色渐变开始，最后以红色结束 */
linear-gradient(0deg, blue, green 40%, red);

/* 颜色提示：从左到右的渐变，由红色开始，沿着渐变长度到 10% 的位置，然后在剩余的 90% 长度中变成蓝色 */
linear-gradient(.25turn, red, 10%, blue);

/* 多位置色标：45% 倾斜的渐变，左下半部分为红色，右下半部分为蓝色，中间有一条硬线，在这里渐变由红色转变为蓝色 */
linear-gradient(45deg, red 0 50%, blue 50% 100%);

官方文档：

linear-gradient() - CSS：层叠样式表 | MDN (mozilla.org)

(二)css设置按钮背景颜色渐变色

 background-image: linear-gradient(45deg, red 0%, blue 100%);

效果图：

参考原文：css怎么设置字体颜色渐变_css文字渐变-CSDN博客