CSS3渐变文字效果

CSS3渐变文字效果是一种为文字添加颜色渐变的技术，它可以让文本内容变得更加美观且具有视觉吸引力。此外，该技术也可以帮助网站目录条目和标签等文本元素突出显示，以及为其他元素添加渐变过渡效果。

/*CSS3线性渐变*/
.gradient{
    background:-webkit-linear-gradient(left,red,green);
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
}
.gradient:hover{
    background:-webkit-linear-gradient(left,green,red);
}

/*CSS3径向渐变*/
.radial_gradient{
    background-image:-webkit-radial-gradient(center,ellipse cover,#8F8FD8 0%,#BFD8D2 100%);
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
}
.radial_gradient:hover{
    background-image:-webkit-radial-gradient(center,#BFD8D2 0%,#8F8FD8 100%);
}

/*CSS3重复线性渐变*/
.repeating_gradient{
    background-image: repeating-linear-gradient(-45deg,#cc1e0c,#cc1e0c 10px,#fff 10px,#fff 20px);
    -webkit-text-fill-color:transparent;
    -webkit-background-clip: text;
}

上述代码展示了三种不同的CSS3渐变效果。第一种是线性渐变，在这种情况下，文本被覆盖了一个渐变的背景图像，并设置了透明文字颜色来显示背景。同时，当对元素进行鼠标悬停时，渐变会发生变化。

第二种是径向渐变，它使用一个椭圆形背景图像来创建渐变效果。同样的，当对元素进行鼠标悬停时，渐变也会发生变化。

第三种渐变效果是重复线性渐变。在这种情况下，文本被覆盖了一个重复的渐变背景图像。此时，我们需要使用背景剪裁（Background Clip）来将背景剪裁为文本大小，并设置透明的文字颜色来显示背景。这种情况下，当文本越多时，渐变会重复出现。