css彩色（渐变）文字

css彩色文字也称渐变文字

在张鑫旭博客首页看到这效果，就自己研究了一下。

实现方法加个背景然后在根据文本剪切,再把文本填充为透明色让之前设置的背景颜色显示出来即可。

 -webkit-background-clip: text;根据文本剪切

 -webkit-text-fill-color: transparent;填充为透明色让之前设置的背景颜色显示出来

css

p {
                background: linear-gradient(to right, red, orange, yellow, green, yellow, orange, red, orange, yellow, green, yellow, orange, red);
                -webkit-background-clip: text;/*背景颜色以文本方式剪切*/
                -webkit-text-fill-color: transparent;/*文字填充为透明色让设置的渐变色显示出来，一定要设置为透明色不然设置的渐变色无法显示出来，会被遮挡住*/
            }

HTML

<p>不是权威指南那种干巴巴的知识，都是从实践角度出发进行剖析和阐述，可以直接落地于生产开发的CSS知识。同时，常年写作历练使得自己知道该如何把深入的知识通过通俗易懂的方式表达出去，因此，</p>

效果图

转载于:https://www.cnblogs.com/zimengxiyu/p/10175303.html