css3凹陷效果 |css 3d盒子模型

/* 通过box-shadow属性实现凹陷效果 */
.box {
background-color: #fff;
box-shadow: inset 0 0 10px rgba(0,0,0,0.5);
padding: 20px;
}
/* 通过border-style属性实现凹陷效果 */
.box {
background-color: #fff;
border-width: 10px;
border-style: inset;
border-color: rgba(0,0,0,0.5);
padding: 20px;
}

上面的代码展示了两种实现凹陷效果的方法。

第一种方法是使用box-shadow属性，inset关键字表示内阴影，0 0表示不偏移，10px表示阴影大小，rgba(0,0,0,0.5)表示阴影颜色和透明度。

第二种方法是使用border-style属性，inset关键字表示内嵌边框，10px表示边框大小，rgba(0,0,0,0.5)表示边框颜色和透明度。另外，padding属性是为了让内容不会被边框挤压。

在实现凹陷效果时，大家还可以利用border-radius属性来制作圆角效果，让凹陷部分看起来更加柔和。

/* 添加圆角效果 */
.box {
background-color: #fff;
border-width: 10px;
border-style: inset;
border-color: rgba(0,0,0,0.5);
border-radius: 10px;
padding: 20px;
}

以上代码将圆角半径设置为10px。通过不断调整圆角半径的大小，可以实现不同的效果。

总体来说，凹陷效果是一种非常实用的效果，可以让页面元素更加真实，具有立体感。而且，它的实现方法也非常简单，只需使用box-shadow或border-style属性加上适当的参数即可。