在矩形中间添加一个圆圈[重复]

Question

我只需要用CSS绘制这个图像：

我已经实现了这一目标：

问题是删除该特定位置上的框阴影。我尝试用剪辑路径切割圆圈，但盒子阴影仍然出现。

.box {
    width: 50%;
    min-height: 100px;
    box-shadow:  0 0 0.125rem 0 hsla(0, 0%, 0%, 0.4);
    position: relative;
    border-radius: 10px;
    z-index: 0;
    padding: 12px;
    margin-bottom: 4px;
}


.box::before {
    content: '';
    position: absolute;
    width: 20px;
    height: 10px;
    border-radius: 50%;
    box-shadow:  0 0 0.125rem 0 hsla(0, 0%, 0%, 0.4);
    transform: translateX(-50%);
    background-color: white;
    border-bottom-left-radius: 110px;
    border-bottom-right-radius: 110px;
    border-top: 0;
    clip-path: inset(0px -10px -10px -10px);
}

.box::after {
    content: '';
    position: absolute;
    width: 20px;
    height: 10px;
    box-shadow:  0 0 0.125rem 0 hsla(0, 0%, 0%, 0.4); /* Your desired box shadow */
    transform: translateX(-50%);
    background-color: white;
    border-top-left-radius: 110px;
    border-top-right-radius: 110px;
    border-bottom: 0;
    clip-path: inset(0px -10px -10px -10px);
}

.box::before {
    top: -1.1px;
    left: 50%;
}

.box::after {
    bottom: -1px;
    left: 50%;
}

<div class="box">
  Content
</div>

小提琴：https://jsfiddle.net/pL9n8g2u/

提前致谢

Answer 1

使用径向渐变与阴影滤镜相结合：

.box {
  --r: 20px; /* control the radius */

  margin: 50px;
  height: 200px;
  
  border-radius: var(--r);
  background: radial-gradient(var(--r) at 50% var(--r),#0000 98%,#fff) 0 calc(-1*var(--r));
  filter: drop-shadow(0 0 3px #000);
}

<div class="box"></div>