css实现文字阴影加渐变效果

效果

文字渐变:

1.使用linear-gradient来实现

background: linear-gradient(to top/right/bottom...,color1 百分比,color2 百分比,...)/* 渐变效果 */
-webkit-background-clip: text; /* 将渐变限制在文字区域 */
color: transparent; /* 将文字颜色设为透明，使渐变可见 */

浮雕效果:

1.使用text-shadow实现(排除)

因为text-shadow是直接作用在文字上的,当文字颜色设置为透明后会影响文字渐变色的显示,所以排除

2.使用-webkit-filter实现(采纳)

因为-webkit-filter可以在文本周围创建一个阴影效果，而不是在文本本身上应用阴影,所以不会影响渐变色的显示

 <div class="big-text">教师画像分析大数据看板</div>
 
 
 //css
 .big-text {
      position: relative;
      // 文字渐变
      color: transparent;
      background-image: linear-gradient(to bottom, #ffffff 50%, #bbbbe9 90%, #7d7de6 100%);
      background-clip: text;
      // 文字阴影
      -webkit-filter: drop-shadow(0px 6px 0px #050508);
}