css 边框立体效果 |css的主要特点

.box {
width: 300px;
height: 200px;
border: 10px solid #ccc;
position: relative;
background: #fff;
}
.box::before, .box::after {
content: '';
position: absolute;
left: -10px;
top: -10px;
width: inherit;
height: inherit;
border: 10px solid #ccc;
transform: translateZ(-10px);
}
.box::before {
transform-origin: top left;
}
.box::after {
transform-origin: bottom right;
}

上面的代码就是实现边框立体效果的CSS代码。大家通过为.box选择器添加伪元素:before和:after来实现效果。通过设置元素的content为空字符串，让它们不显示任何内容。

接着，大家为这两个伪元素设置绝对定位，并将宽度和高度均设置为inherit，这样它们的宽度和高度就等于.box元素的宽度和高度。

然后，大家为伪元素添加10px的实线边框，并将边框颜色设置为#ccc。这时候，大家可以看到伪元素实心边框覆盖了.box元素的边框。

为了产生立体效果，大家需要给伪元素设置transform: translateZ(-10px)。这样，伪元素就会被沿z轴方向向后偏移10px，看起来就像是有一个向下的立体效果。

最后，大家给:before设置transform-origin: top left;，给:after设置transform-origin: bottom right;。这样，大家就为伪元素设置了变换的基准点，让它们沿着顶点和底点进行变换，从而产生更加真实的立体效果。

通过这些简单的CSS代码，大家就可以让边框立体化，为页面增添炫酷的效果。