css同时设置文字渐变色和文本阴影效果

写样式时发现可以给文本设置渐变色，或者单独设置text-shadow，但是同时设置就会有问题，然后找到了解决办法，记录一下。

html：

<div class="headTitle">后台管理系统</div>

css：

.headTitle {
  font-size: 35px;     /*文字尺寸大小*/
  font-weight: 550;   /*文字加粗效果*/
  background-image: linear-gradient(to bottom, #067ec2, #134675); /*向下线性渐变*/
  -webkit-background-clip: text;       /*背景裁剪*/
  color: transparent;                 /*背景颜色为透明*/
}
.headTitle::before {
  content: "后台管理系统";      /*白色阴影文字*/
  position: absolute;         /*绝对定位*/
  z-index: -1;               /*理解成一个层叠效果 z-index:-1; 就是在平面的下面一层 */
  text-shadow:0 0 6px #fff; /*白色阴影效果*/
}

效果：