前端 css3 CSS 实现文字渐变色

1、background 属性设置渐变色

1、源码示例：

.text {

background-image: linear-gradient(to right, pink, purple);

color: transparent;

-webkit-background-clip: text;

}

2、实现原理： （1）background-image ：为该文字区域设置渐变背景色。 语法：background-image: linear-gradient(direction, color-stop1, color-stop2, …); 参数：渐变方向、开始颜色、结束颜色

linear-gradient(blue, red);/* 默认从上到下，蓝色渐变到红色 */

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

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

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

（2）color：transparent ：将文字颜色设置成透明色。 （3）background-clip：text 将背景裁剪成文字前景色。 ⚠️注：background-clip：text 不支持ie 属性： border-box（默认值。背景绘制在边框方框） padding-box （背景绘制在衬距方框） content-box （背景绘制在内容方框） text（背景绘制在文字里）

#example1 {

border: 10px dotted black;

padding:10px;

background-image: linear-gradient(to right, yellow, pink 50%)

}

#example2 {

border: 10px dotted black;

padding:10px;

background-clip: padding-box;

background-image: linear-gradient(to right, yellow, pink 50%)

}

#example3 {

border: 10px dotted black;

padding:10px;

background-clip: content-box;

background-image: linear-gradient(to right, yellow, pink 50%)

}

#example4 {

border: 10px dotted black;

padding:10px;

background-clip: text;

-webkit-background-clip:text;

color: transparent;

background-image: linear-gradient(to right, yellow, pink 50%)

}

2、-webkit-mask图片蒙版效果制作渐变色

.text-gradient {

position: relative;

color: pink;

font-size: 20px;

}

.text-gradient:before {

content: attr(text);

position: absolute;

z-index: 10;

color: orange;

-webkit-mask: linear-gradient(to right, transparent, orange);

}