clip-path: circle() 用于创建圆形裁剪区域，语法为 circle(r at cx cy)，半径 r 默认基于元素宽高较小值，圆心 cx/cy 默认居中；需注意宽高设置、浏览器兼容性（如Safari≤13.0不支持百分比半径）、边缘模糊原因及响应式限制。
clip-path: circle() 不能直接“裁剪头像”——它只定义可见区域的形状，不处理图片加载、尺寸适配或 fallback 兼容性。真正在项目里用它做头像，得配合 img 或 background-image + 容器控制，且必须考虑 Safari 旧版本、IE 全系不支持的问题。
为什么 clip-path: circle() 常常不生效
最常见原因是元素没设置宽高，或父容器塌陷。CSS clip-path 作用在盒模型上，如果 img 是内联元素（默认行为），又没设 display: block 或明确宽高，circle(50%) 就会按 0×0 区域计算，结果啥也不显示。
- 确保目标元素有确定的
width和height（比如120px） - 给
img加display: block，避免行内空白干扰 -
circle()的半径单位是相对于元素自身的宽高中较小者（不是父容器），circle(50%)表示“以中心为原点、半径为元素短边一半的圆” - 别用
clip-path: circle() at center这种写法——at只在inset()或path()中合法，circle()不接受位置偏移参数
三种可靠用法对比：img vs background-image vs inline SVG
实际项目中选哪种，取决于你是否需要响应式缩放、是否要支持 alt 文本、以及是否要兼容老浏览器。
-
纯
img+clip-path：语义正确、支持 alt、可右键保存，但需固定尺寸；示例：<img src="avatar.jpg" alt="用户头像" style="width: 80px; height: 80px; border-radius: 50%; clip-path: circle(); display: block;">
（注意：这里border-radius: 50%是 fallback，clip-path是增强） -
背景图容器：适合需要居中裁切（如 cover 效果），但丢失 alt；需额外包裹一层
div并设background-size: cover -
inline SVG
<clipPath>：兼容性最好（IE9+），可动态改半径，但代码冗长；适用于必须支持 IE 的管理后台
移动端和 Safari 的坑：百分比半径失效、缩放错位
iOS Safari（尤其 15.4 之前）对 clip-path: circle(50%) 解析不稳定，滚动或缩放后可能突然变方。根本原因是它把百分比解析成基于视口而非元素本身。临时解法是用像素值代替：
立即学习“前端免费学习笔记（深入）”；
- 不用
circle(50%)，改用circle(40px)（假设头像固定 80px） - 响应式场景下，用 CSS 自定义属性 + JS 监听 resize 动态更新：
clip-path: circle(calc(var(--r) * 1px)) - 加
transform: translateZ(0)强制 GPU 加速，能缓解 Safari 渲染错位 - 永远把
border-radius: 50%放在clip-path前面——这样不支持clip-path的浏览器至少还能看到圆角
真正难的不是写出 circle()，而是判断什么时候该用它、什么时候该退回到 border-radius、什么时候必须切 SVG。很多所谓“高级裁剪效果”，其实只是用 ellipse() 或 inset() 模拟，但一上生产环境，就卡在安卓 WebView 内核版本碎片化上。
