用border-radius实现图片圆角需包裹在正方形容器中并设overflow: hidden，单独作用于无效；真圆形须容器宽高相等且border-radius: 50%，推荐配合object-fit: cover和显式尺寸使用。
用 border-radius 实现图片圆角，不是所有值都有效
直接给 <img> 元素加 border-radius: 12px 就能实现圆角，但要注意：它只作用于图片的**渲染边界**，不改变原始图片尺寸或比例。如果图片父容器有溢出限制（比如设置了 overflow: hidden），圆角才真正“可见”；否则只是视觉上的描边效果。
常见错误是只加 border-radius 却没控制容器，结果圆角被截断或根本看不出变化。建议始终配合显式宽高和 overflow: hidden 使用：
<div style="width: 200px; height: 150px; border-radius: 16px; overflow: hidden;"> @@##@@ </div>
-
object-fit: cover防止拉伸变形，确保裁剪区域合理 - 避免只对
<img src="photo.jpg" style="max-width:90%">单独设border-radius而忽略容器——很多“圆角失效”问题根源在此 - 百分比值（如
50%）在等宽高时才稳定，非正方形图用50%会变成椭圆角
用 border-radius: 50% 做真圆形裁剪，前提是宽高等比
想让图片变圆形，必须满足两个硬性条件：容器宽高相等 + border-radius: 50%。单独给 <img> 设 50% 没用，因为图片本身不是块级盒子，它的圆角受盒模型约束。
最可靠的做法是包裹一层 <div> 并强制正方形尺寸：
<pre class="brush:php;toolbar:false;"><div style="width: 120px; height: 120px; border-radius: 50%; overflow: hidden;">
@@##@@
</div></pre>
<ul>
<li>如果原始图是长方形，<code>object-fit: cover 会居中裁剪，保留主体；用 contain 则会留白
aspect-ratio: 1 / 1（现代浏览器支持）+ max-width
aspect-ratio，需回退为 padding-top 百分比 hack 或 JS 控制
clip-path 提供更灵活的裁剪形状，但兼容性和性能要留意
当需要椭圆、三角、甚至不规则轮廓时，clip-path 是唯一选择。圆形写法：clip-path: circle(50% at 50% 50%)，但它不要求容器正方形，也不依赖 overflow。
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
不过要注意实际限制：
- Firefox 和 Safari 对
clip-path的circle()支持良好，但旧版 Chrome 需加-webkit-前缀 - 用
clip-path裁剪后，图片的点击热区、焦点框仍按原始矩形计算，可能影响可访问性 - 动画
clip-path在低端设备上容易掉帧，避免在滚动区域频繁触发 - 不能和
border-radius混用——后者会被前者完全覆盖
SVG <clippath></clippath> 是最稳妥的圆形方案，适合关键场景
如果项目需兼容 IE11 或要求 100% 可控（比如头像上传预览），内联 SVG 的 <clippath></clippath> 是最稳的选择。它不依赖 CSS 渲染逻辑，且裁剪路径与图像坐标严格绑定。
最小可用结构如下：
<svg width="0" height="0"><defs><clippath id="circle-clip"><circle cx="50" cy="50" r="50"></circle></clippath></defs></svg> @@##@@
-
<svg></svg>可放页面任意位置（包括），设width="0" height="0"不占布局 - ID 必须唯一，多个圆形需不同 ID，否则后定义的会覆盖前一个
- 注意
<circle></circle>的cx/cy/r要和图片最终渲染尺寸匹配，否则裁剪偏移
复杂度在于维护 SVG 片段和尺寸同步，简单项目优先用 border-radius + 正方形容器；对一致性要求极高的地方，SVG 方案不可替代。
