box-shadow 设置不生效

使用 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;
       }
  }
}

加/deep/ 再配个!important

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

你百度一下深度选择器 elementui

::v-deep.el-card

可以把页面运行起来，直接F12在element style里面写，如果可以把样式复制到代码里面，也可以使用：v-deep 、/deep/等

scss 的话前面加 ::v-deep
less 的话用 /deep/

box-shadow: 0 10px 10px rgba(0, 0, 0, .4);