current position:Home>Box shadow setting does not take effect

Box shadow setting does not take effect

2022-01-27 00:02:08 CSDN Q & A

Use VUE and elemen-ui Medium el-card Components Set for component box-shadow: rgba(0,0,0 .4) 0 10px 10px
I think there is a problem with the setting of other properties, which makes it impossible to display But how to adjust other attributes all the time can't show the effect , Excuse me, what's going on css The properties of are set as follows :

.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; /* Mouse hover becomes a small hand */      position: relative;      top: 0;      transition: all .3s linear;       }  }}



Refer to the answer 1:

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




Refer to the answer 2:



Refer to the answer 3:

to .el-card Front settings /deep/ Well ?/deep/.el-card




Refer to the answer 4:



Refer to the answer 5:
<style lang="scss" > Do not add scoped

img

img




Refer to the answer 6:



Refer to the answer 7:

You Baidu depth selector elementui




Refer to the answer 8:



Refer to the answer 9:

::v-deep.el-card




Refer to the answer 10:



Refer to the answer 11:

You can run the page , direct F12 stay element style It says in it , If you can copy the style into the code , You can also use :v-deep 、/deep/ etc.




Refer to the answer 12:



Refer to the answer 13:

scss Add... Before the words ::v-deep
less It's very useful /deep/




Refer to the answer 14:



Refer to the answer 15:

Add /deep/ Another one !important

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




Refer to the answer 16:

copyright notice
author[CSDN Q & A],Please bring the original link to reprint, thank you.
https://en.cdmana.com/2022/01/202201270002063551.html

Random recommended