css字体阴影+渐变

目前好多都是使用

-webkit-background-clip: text;//将文字以外的背景切掉
color: transparent;//字体透明
background: linear-gradient(to right, #E4C9A0, #AD8B61);//背景只剩下文字部分，渐变即是字体渐变

而阴影效果则是使用text-shadow来完成

text-shadow:5rpx 2rpx 6rpx #000;

两者都没问题，但是两者一结合使用，问题就来了，text-shadow的阴影会挡住文字渐变的效果，显得非常奇怪

                ​​​​​​​        ​​​​​​​        ​​​​​​​        ​​​​​​​        ​​​​​​​        ​​​​​​​        

然后去搜了下别的，发现有错，改了之后能用的。

body {
    background: #441369;   
}
  
h1#gradient {
    text-align:center;
}
h1#gradient span {
    position:relative;
    display: inline-block;
    color: #FF0052; /* Fallback Color */
    text-transform: uppercase;
    font-weight: bold;
    font-family: helvetica;
    text-align:center;
    font-size: 70px;
    letter-spacing: -2px;
    text-shadow:  2px 2px 2px rgb(0,0,0);  /* Fallback Shadow */
}
@media  screen and (-webkit-min-device-pixel-ratio:0) {
    h1#gradient span{
        background: -webkit-gradient(linear,left top,left bottom,from(#FF0052),to(#802F7B));
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        text-shadow:none !important;
    }
    h1#gradient span:after {
        background: none;
        content: attr(data-text);
        left: 0;
        position: absolute;
        text-shadow:  2px 2px 2px rgb(0,0,0); //relief shade effect 
        top: 0;
        z-index: -1;
    }
}

//这行他们根本没改，看都不看就复制粘贴
<h1 id="gradient"><span data-text="党建智图">党建智图</span></h1>