box-shadow 设置不生效

Question

使用 VUE 和elemen-ui中的el-card组件 为组件设置了box-shadow: rgba(0,0,0 .4) 0 10px 10px
我感觉是其他属性的设置有问题导致无法显示 但是一直怎么调其他属性都无法显示出效果,请问下怎么回事 css的属性设置如下：

.el-main {
  background-color: #F9F9F9;

  .el-row {
    width: 100%;

    .el-card:hover {
      top: -10px;
      box-shadow: rgba(0, 0, 0, .4) 0 10px 10px;
    }

    .el-card {
      height: 8%;
      cursor: pointer; /*鼠标悬停变成小手*/
      position: relative;
      top: 0;
      transition: all .3s linear;
       }
  }
}

Answer 1

加/deep/ 再配个!important

/deep/.el-card{
box-shadow: 0 10px 10px red !impprtant;
}