css如何实现凹陷效果

CSS实现凹陷效果通常可以通过使用box-shadow属性来完成。box-shadow属性可以为元素添加一个或多个阴影效果，通过调整阴影的颜色、偏移量、模糊半径和扩展半径，可以创造出凹陷的视觉效果。

以下是一个简单的例子，展示如何使用box-shadow来创建一个凹陷效果：

.depressed-effect {
  width: 200px;
  height: 200px;
  background-color: #f0f0f0;
  border-radius: 10px;
  box-shadow: inset 0px 0px 10px #ccc;
}

在这个例子中，box-shadow属性的值为inset 0px 0px 10px #ccc，其中：

• inset关键字表示阴影是向内凹陷的。
• 0px和0px分别代表水平偏移量和垂直偏移量，这里设置为0表示阴影紧贴元素边缘。
• 10px是模糊半径，数值越大，阴影边缘越模糊。
• #ccc是阴影的颜色，可以根据需要调整。

应用这个CSS类到一个HTML元素上：

<div class="depressed-effect"></div>

这将在页面上创建一个具有凹陷效果的方形元素。

除了box-shadow，还可以通过其他CSS属性和技巧来实现凹陷效果，例如使用伪元素（:before或:after）来创建阴影，或者结合使用border-radius和background-clip属性。

参考链接：

• MDN Web Docs - box-shadow
• CSS-Tricks - Creating a Subtle Drop Shadow Effect

在实际应用中，选择哪种方法取决于具体的设计需求和浏览器兼容性考虑。