在盒子内侧伪造两个对边内阴影
如图,在盒子内侧伪造两个对边内阴影。
用box-shadow
无法达到只要对边阴影的效果,只能取单边、临边或四个边。
思路
在盒子的前后各造两个伪元素,给这两个伪元素分别定位到盒子两侧,通过背景色线性渐变来达到一个看似阴影的效果。
(注意,父盒子记得加定位)
.menber_item::before,
.menber_item::after {
content: "";
display: block;
position: absolute;
width: 20px;
height: 100%;
top: 0;
z-index: 998;
}
.menber_item::before {
left: 0;
background: linear-gradient(to right, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0));
}
.menber_item::after {
right: 0;
background: linear-gradient(to left, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0));
}