纯css 设置盒子阴影,阴影颜色跟图片保持一致
这个盒子阴影能根据不同的图片显示,跟图片保持一致
css代码如下:
.content-item div {
width: 260px;
height: 260px;
border-radius: 10px;
background-size: contain;
position: relative;
}
.content-item div::after {
content: "";
background: inherit;
width: 200px;
height: 200px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
filter: blur(20px) brightness(80%);
transition: all 300ms;
z-index: -1;
}
.content-item div:hover::after {
width: 280px;
height: 280px;
}