css如何把框立体显示 |css手指头

/* 创建一个有立体感的盒子 */
.box {
width: 200px;
height: 100px;
background-color: #333;
border: 5px solid #000;
box-shadow: 0 0 10px 5px #000;
}
/* 把盒子内部向下移动3px */
.box:after {
content: "";
display: block;
position: absolute;
top: 3px;
bottom: 0;
left: 0;
right: 0;
background-color: #666;
box-shadow: 0 5px 10px -5px #000;
transform: rotateX(45deg);
}

上述代码创建了一个立体的盒子。大家首先定义了一个基本盒子，使用了一个黑色的边框和一些灰色的阴影。然后，通过伪元素:after，创建了一个类似于盖在盒子顶部的阴影盖子并设置了一个45度的角度。

接着，大家定义了一个transform属性，使用rotateX函数，使盖子绕X轴旋转。最后，通过box-shadow属性和负的模糊半径，使其看起来更有立体感和投影效果。

当然，这只是CSS立体化的基本概念。通过尝试不同的属性值、调整元素位置以及叠加多个伪元素，你可以让你的页面看起来更加立体化。