-webkit-background-clip属性不生效问题

一.初遇

今天项目需求需要用到  字体  线性渐变 百度一番找到如下方案

.text-gradient {
      background-image: linear-gradient(to top, #36EFFF, #25D5A5);
      -webkit-background-clip: text;
      color: transparent;
      font-size: 30px;
    }

<span class="text-gradient">123</span>

这个效果呢也确实可以实现，看下demo效果：

可以看到确实是线性渐变。

那么我们把他移植到项目中

 <el-aside style="width: 60%;padding: 0 20px;">
        <div class="time">
          <div>
            <span class="mytext-gradient">{{ date.year }} {{ date.month }} {{ date.date }}            
            </span>
            <span class="mytext-gradient">{{ date.week }}</span>
            <span class="mytext-gradient">{{ date.h }}：{{ date.m }}：{{ date.s }}</span>
          </div>
        </div>
</el-aside>


.mytext-gradient {
  display: inline-block;
  height: 50px;
  text-align: center;
  line-height: 50px;
  font-size: 20px;
  font-weight: 600;
  color: transparent;
  -webkit-background-clip: text;
  background-image: linear-gradient(to top, red, #25D5A5);
}

 二. 意外

然而意料之中的效果并没有出现

这是什么鬼！！！！

三. 发现蛛丝马迹 

经过和demo对比代码，初步发现是 “  -webkit-background-clip: text;” 这句代码。

对比demo 发现 项目中少了这句代码，可是为什么会少呢？我明明在项目中写了这句代码啊！

经过百度发现这个属性不能被嵌套，就是说它外部不能有元素，可以看这个  css – Chrome 69使用’transform’,’ – webkit-background-clip：text’和’color：transparent’不起作用 - 编程之家 不只是69版本有这个问题，最新版也有。在edge中也是，但是在firefox就可以正常显示渐变。那怎么解决呢？

四. 解决

首先在项目中发现是少了这句代码，那我能不能给他加上呢？

看一下代码

let x = document.querySelectorAll(".mytext-gradient")
    for(let o of x) {
      o.style["-webkit-background-clip"] = 'text'
    }

再看一下页面

欧克，解决！

00后初入前端小白，写的不好请各路大神指教！