CSS:文字渐变色/文字任意方向渐变色/图片纹理文字等效果

直接上代码：
纵向渐变文字：

 <p class="tt">嗷嗷嗷嗷嗷</p>
 /******************************************/
 <style>
        .tt{
            background-image: linear-gradient(red,green);//背景色渐变，默认从上到下
            -webkit-background-clip: text;//CSS3属性：设定背景的绘制范围为文字
            color: transparent;//将字的颜色设置透明，只露出背景色
        }
    </style>

效果：

实际上我们实现的是：背景色渐变+背景绘制文字区域+文字透明；来实现文字渐变，本质上我们看到的是背景而不是文字；由此：只要我们设置想要的背景纹理，则可以实现各种花哨的文字样式。↓↓↓↓↓↓↓↓↓↓↓↓↓
任意方向渐变文字：
代码：

 <p class="tt">嗷嗷嗷嗷嗷</p>
 /******************************************/
 <style>
        .tt{
            width: 500px;
            background-image: linear-gradient(to right , #7A88FF, #7AFFAF);//在这里设置方向与颜色，则可以实验任意方向的文字渐变色效果实现。
            -webkit-background-clip: text;//CSS3属性：设定背景的绘制范围
            color: transparent;//将字的颜色设置透明，只露出背景色
        }
    </style>

效果：

图片纹理文字：
代码：

 <p class="tt">嗷嗷嗷嗷嗷</p>
 /******************************************/
 <style>
        .tt{
            background: url('../images/adv.jpg') no-repeat;//将图片设为背景
            -webkit-background-clip: text;//CSS3属性：设定背景的绘制范围
            color: transparent;//将字的颜色设置透明，只露出背景色
        }
    </style>

效果：