filter:drop-shadow(水平阴影偏移距离 垂直阴影偏移距离 投射的阴影颜色 );
对于透明背景的icon而言,这个很好使
在原icon的侧面建立一个可以自定义颜色的投影,然后利用父元素的overflow:hidden和子元素的position:relative造成的偏移,从而实现对icon的改色,
用于需要hover和选中的菜单icon及其好使
以下的目标是对element-ui的menu组件的全局修改,变大变绿
.el-menu {
border: 0;
width: 60px;
display: flex;
flex-direction: column;
justify-content: center;
background-color: inherit;
.iconmenu {
height: 15px;
width: auto;
}
.el-menu-item:hover {
background-color: #fff;
border-top-left-radius: 16px;
border-bottom-left-radius: 16px;
overflow: hidden;
.iconmenu {
height: auto;
width: 30px;
}
}
.el-menu-item.is-active {
.iconmenu {
filter: drop-shadow(60px 0 #a1d46a);
height: auto;
width: 30px;
position: relative;
top: 0;
left: -63px;
}
}
}