border-radius: 50% 仅在元素为正方形时生成正圆；若宽高不等则得椭圆，须配合相等的 width/height 或 aspect-ratio: 1 才可靠实现圆形效果。
border-radius 设为 50% 就够了吗？
多数情况下，border-radius: 50% 确实能让元素变圆，但前提是它得是个**正方形**。如果宽高不等，比如 width: 200px; height: 100px;，加了 border-radius: 50% 得到的是椭圆，不是圆。
- 必须确保
width和height相等（或用aspect-ratio: 1强制正方形） - 若宽高来自内容（如文字、图片），需额外控制尺寸，不能只靠
border-radius - 对
img元素，建议显式设置宽高，避免因加载延迟或响应式缩放破坏圆形
img 标签怎么安全地变成圆？
直接给 <img> 加 border-radius: 50% 很常见，但容易出问题：图片拉伸变形、裁剪不居中、边缘锯齿。
- 务必加上
width和height，且值相等（如width: 120px; height: 120px;） - 用
object-fit: cover防止拉伸，配合object-position: center确保关键区域居中 - 避免用
background-image模拟头像——那样无法被屏幕阅读器识别，也不利于 SEO
<img src="avatar.jpg"
alt="用户头像"
style="width: 80px; height: 80px; border-radius: 50%; object-fit: cover; object-position: center;">
用 clip-path 能否替代 border-radius？
可以，但没必要在基础圆形场景下用。clip-path: circle(50%) 确实能强制裁出圆，甚至对非正方形容器也生效，但它有明显代价：
- 不支持 IE 和旧版 Safari（
clip-path的 circle() 形式在 Safari 15.4+ 才稳定） - 会裁掉超出区域的内容（包括阴影、描边、子元素溢出部分），而
border-radius只影响边框和背景绘制 - 性能略低，尤其在动画中频繁触发重绘时
- 对可访问性无益——它只是视觉裁剪，语义和布局不受影响，但也没带来额外优势
伪元素 + transform 做圆形图标靠谱吗？
有人用 ::before 画圆再旋转模拟动态效果，比如加载中的圆环。但纯圆形展示（如头像、按钮）完全不需要这么绕。
立即学习“前端免费学习笔记（深入）”；
- 仅当需要 SVG 级控制（如圆环缺口、渐变描边）时才考虑
clip-path或 SVG；日常圆形就用border-radius+ 正方形尺寸 - 用
transform: rotate()做“转圈”动画时，别忘了加transform-origin: center，否则旋转中心偏移 - 注意：
border-radius在缩放（scale）后可能产生亚像素渲染模糊，若对清晰度敏感，优先固定尺寸而非依赖缩放
border-radius，而是没意识到浏览器根本不管“你想让它圆”，它只认“你给的盒模型是不是正方形”。宽高不一致时，50% 只是半长轴/半短轴比例，不是圆。 
