重要属性：
-webkit-background-clip: text;
使用了这个属性的意思是，以区块内的文字作为裁剪区域向外裁剪，文字的背景即为区块的背景，文字之外的区域都将被裁剪掉。用渐变背景作为颜色填充文本
text-fill-color;
文本填充颜色,不过它实际也是设置对象中文字的填充颜色，和color的效果很相似。如果同时设置text-fill-color和color两个属性，
text-fill-color会覆盖掉color的值。
<style>.textGradient {font-size: 30px;font-weight: bold;background: linear-gradient(to right, #40e0d0, #ff8c00, #ff0080);background-size: cover;-webkit-background-clip: text;-webkit-text-fill-color: transparent;background-clip: text; text-fill-color: transparent;display: inline-block; /*重要属性，如果不写，渐变色效果有明显的区别，针对块级元素*/}</style><p class="textGradient">渐变色文本 Hello</p>
效果图：
实现动画效果：
<style>p{font-size: 40px;font-weight: bolder;-webkit-text-fill-color: transparent;background-image: -webkit-linear-gradient(left,#129835,#ece648 25%,#129835 50%,#F9E92B 75%,rgb(40, 150, 38));background-size: 200%,100%;-webkit-background-clip: text;-webkit-animation: word 5s linear infinite ;display: inline-block;}@keyframes word {0%{background-position: 0 0}100%{background-position: -100% 0}}</style><p>佩奇公主</p>
效果图如下：
