css怎么画半圆凹槽,如何用css实现一个div的左右半圆凹陷，并且凹陷的地方显示父div的背景图...

要实现一个div的左右半圆凹陷，并且凹陷的地方显示父div的背景图，可以使用CSS的伪元素和border-radius属性来实现。

首先，我们可以为父div设置一个背景图，然后使用伪元素:before和:after分别在左右两侧创建半圆形的元素，使用border-radius属性设置圆角半径，同时使用绝对定位和z-index属性将它们放在父div的左右两侧。

接下来，我们可以使用overflow:hidden属性来裁剪伪元素的半圆形部分，从而让父div的背景图显示出来。

下面是一个使用CSS实现左右半圆凹陷的示例代码：

<div class="container">
  <div class="inner"></div>
</div>

.container {
  width: 400px;
  height: 200px;
  background-image: url('bg.jpg');
  position: relative;
}

.inner {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}

.container:before,
.container:after {
  content: '';
  position: absolute;
  top: 0;
  width: 50%;
  height: 100%;
  z-index: -1;
  overflow: hidden;
  border-radius: 0 50% 50% 0;
}

.container:before {
  left: 0;
  background-color: #fff;
}

.container:after {
  right: 0;
  background-color: #fff;
}

在这个示例中，我们创建了一个名为.container的父div，它包含一个名为.inner的子div。父div设置了一个背景图，子div则用于占位。

我们使用:before和:after伪元素来创建半圆形的元素，它们分别放置在父div的左右两侧。我们使用border-radius属性设置圆角半径，并使用overflow:hidden属性来裁剪半圆形部分，从而让父div的背景图显示出来。

最后，我们使用position:absolute和z-index属性将伪元素放在父div的下面，并使用background-color属性设置它们的颜色。

这样，我们就成功地使用CSS实现了一个左右半圆凹陷的div，并让凹陷的地方显示父div的背景图。