CSS div背景圆形填充

一、目标效果

div内容圆形填充

二、功能实现

1. border-radius

border-radius: 50%;
background: #F56C6C;

问题：如果div不是正方形，填充的圆形也不是圆形

2. clip-path

clip-path: circle(30%);
background: #F56C6C;

问题：边框受影响

3. radial-gradient

background: radial-gradient(circle, #F56C6C 66%, transparent 66%);

问题：圆的边缘会有锯齿，模糊