css图形绘制，实现内凹圆角盒子中间凹陷为一个圆形

提示：以下是本篇文章正文内容，下面案例可供参考

一、案例要求

示例：

二、实现代码

1.代码如下（示例）：

<div style="display:flex">
      <div class="block"
      style="width: 350px;height: 125px;background-image: radial-gradient(200px at 100% 128px, transparent 200px, #f5f5f5 50%);"
      ></div>
      <div class="block"
      style="width: 350px;height: 125px;background-image: radial-gradient(199px at 0% 128px, transparent 200px, #f5f5f5 50%);"
      ></div>
      </div>
      <div style="display:flex; margin-top:20px">
      <div class="block"
      style="width: 350px; height: 125px; background-image: radial-gradient(200px at 100% 0px, transparent 200px, #f5f5f5 50%);"
      ></div>
      <div class="block"
      style="width: 350px;height: 125px;background-image: radial-gradient(200px at 0% 0px, transparent 200px, #f5f5f5 50%);"
      ></div>
      </div>

---

总结

实现内凹圆角，四个盒子中间凹陷为一个圆形