Css 实现边界 凹陷 状态

要实现边界凹陷的效果，我们可以使用CSS的伪类选择器`:before`和`:after`，并将它们设置为元素的背景。

以下是一个简单的CSS代码示例，可以实现边界凹陷的效果：

.box {
  position: relative;
  width: 200px;
  height: 200px;
  background-color: #fff;
  border: 1px solid #000;
}

.box:before {
  content: "";
  position: absolute;
  top: -10px;
  left: -10px;
  width: calc(100% + 20px);
  height: calc(100% + 20px);
  background-color: #fff;
  border: 1px solid #000;
  z-index: -1;
}

.box:after {
  content: "";
  position: absolute;
  bottom: -10px;
  right: -10px;
  width: calc(100% + 20px);
  height: calc(100% + 20px);
  background-color: #fff;
  border: 1px solid #000;
  z-index: -1;
}

在这个示例中，我们首先创建了一个带有边框的方形元素，然后使用`:before`和`:after`伪类选择器来创建两个背景元素。

`:before`选择器创建了一个位于元素顶部和左侧的背景元素，`:after`选择器创建了一个位于元素底部和右侧的背景元素。

我们使用`position: absolute`属性将这些背景元素定位到其父元素的边界之外，并使用`z-index`属性将它们放在父元素的下方。

最后，我们将这些背景元素的边框颜色设置为与父元素相同，以便它们与父元素的边框融合在一起，从而实现边界凹陷的效果。