css3正方形阴影

CSS3中的box-shadow属性可以用来添加阴影效果。通过设置水平偏移量、垂直偏移量、模糊半径以及颜色值，可以实现各种阴影效果。

在实际应用中，我们经常需要用到正方形阴影效果。使用CSS3的伪元素选择器before和after可以轻松实现正方形的阴影效果。

.box-shadow {
    position: relative;
    width: 200px;
    height: 200px;
    background-color: #ffffff;
    box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.5);
}
.box-shadow:before,.box-shadow:after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    width: 200px;
    height: 200px;
    box-shadow: inherit;
}
.box-shadow:before {
    transform: rotate(45deg);
}
.box-shadow:after {
    transform: rotate(-45deg);
}
    

上述代码中，我们定义了一个box-shadow的class，它的宽度和高度都为200px，背景色为白色。通过box-shadow属性的设置，实现了一个15像素模糊的黑色阴影效果。

接下来，我们使用伪元素选择器:before和:after分别创建两个正方形，宽度和高度都是200px，并且使用了与box-shadow相同的样式。其中:before元素使用了45度的旋转，:after元素使用了-45度的旋转，这样就形成了正方形的阴影效果。

通过这种方式，我们可以轻松实现CSS3下的正方形阴影效果，让网页更加美观和精致。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！