一、目标效果
div内容圆形填充
![在这里插入图片描述](https://img-blog.csdnimg.cn/162a769206cf40d3ac8a373730e08833.png)
二、功能实现
1. border-radius
border-radius: 50%;
background: #F56C6C;
问题:如果div不是正方形,填充的圆形也不是圆形
![在这里插入图片描述](https://img-blog.csdnimg.cn/bff0f43ebcfb4c4ebf5fd3958902a0da.png)
2. clip-path
clip-path: circle(30%);
background: #F56C6C;
问题:边框受影响
![在这里插入图片描述](https://img-blog.csdnimg.cn/ac9b93ea3625495fa4df3c31385fa781.png)
3. radial-gradient
background: radial-gradient(circle, #F56C6C 66%, transparent 66%);
问题:圆的边缘会有锯齿,模糊
![在这里插入图片描述](https://img-blog.csdnimg.cn/2a37f4d060684381b0156336565891af.png)