css前后方形阴影 |3图叠加轮播css代码

.box{
width: 200px;
height: 200px;
background-color: #fff;
margin: 50px auto;
position: relative;
}
/* 前方形阴影 */
.box::before{
content: '';
position: absolute;
top: 10px;
left: 10px;
width: 100%;
height: 100%;
box-shadow: 0 0 20px rgba(0,0,0,.5);
z-index: -1;
}
/* 后方形阴影 */
.box::after{
content: '';
position: absolute;
bottom: 10px;
right: 10px;
width: 100%;
height: 100%;
box-shadow: 0 0 20px rgba(0,0,0,.5);
z-index: -1;
}

在上述代码中，大家首先创建了一个名为.box的元素，并设置了它的宽度、高度、背景色和外边距。然后，大家通过伪元素::before和::after来添加前后方形阴影。

对于前方形阴影，大家使用position属性将它相对于.box进行定位，并设置了它相对于父元素的top和left值为10px，使阴影稍微偏离一下，产生更好的效果。然后，大家给它添加了一个box-shadow属性，设置了阴影的大小、颜色和透明度。最后，大家将它的z-index属性设置为-1，使其在.zox的背景下面。

对于后方形阴影，大家使用类似的方法进行处理。不同的是，大家将它的bottom和right值设置为10px，使阴影显示在元素的右下方。同时，大家还将其z-index属性设置为-1，确保阴影显示在元素的后面。

通过这种方式，在网页设计中添加前后方形阴影是非常方便的。一定要掌握这个技巧，让你的设计更加立体、有层次感。