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

芒果63

已于 2022-07-28 17:08:37 修改

阅读量1.3k

点赞数

分类专栏：前端文章标签： css 前端 vue.js javascript html

于 2022-07-28 17:07:42 首次发布

本文链接：https://blog.csdn.net/m0_49017085/article/details/126039248

版权

前端专栏收录该内容

8 篇文章 1 订阅

订阅专栏

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

一、案例要求

示例：

二、实现代码

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>