用border-radius:50%可将正方形图片裁为圆形头像，需配合width=height、object-fit:cover及overflow:hidden；非正方形图会变椭圆，推荐用aspect-ratio:1或clip-path:circle(50% at 50% 50%)提升精度。
用 border-radius 把图片裁成圆形，再加白色边框
直接给 <img> 元素设置 border-radius: 50% 和 border: 2px solid #fff 就能实现白色圆形外框。但前提是图片本身是正方形（宽高相等），否则会变成椭圆或不居中的“歪圆”。
常见错误现象：border-radius: 50% 加了没效果，或者圆不完整、边缘被截断——大概率是父容器有 overflow: hidden 或图片宽高不一致。
- 确保图片尺寸为正方形：比如
width: 100px; height: 100px; - 推荐用
aspect-ratio: 1 / 1配合object-fit: cover自动适配原图比例 - 如果图片来自用户上传且尺寸不可控，建议先用 CSS 容器包裹，设为
display: flex; justify-content: center; align-items: center;居中裁切
用 clip-path 更精准地控制圆形裁剪范围
clip-path: circle(50% at 50% 50%) 比 border-radius 更可靠，它真正“剪掉”多余区域，不受盒模型影响。适合需要严格圆形轮廓、又不想依赖图片原始比例的场景。
兼容性注意：IE 不支持，但 Chrome/Firefox/Safari/Edge 均已稳定支持多年；如需兼容 IE，只能退回 border-radius + 手动约束宽高。
立即学习“前端免费学习笔记（深入）”；
- 必须配合
width和height显式设定，否则clip-path的百分比基准不确定 - 白色外框要单独加在父容器上，比如用
<div class="avatar"><img></div>，然后给.avatar设border: 3px solid #fff - 避免和
transform: scale()同时使用，某些旧版 Safari 下可能触发渲染异常
头像类场景推荐用 background-image + border-radius
当图片只是装饰性头像（比如用户头像展示页），不如把图片设为容器背景，这样更易控制形状、缩放和边框样式，也避免 <img> 标签加载失败时的 alt 文本干扰布局。
典型错误：直接给 background-image 的 div 加 border-radius 却忘了加 background-size: cover，导致头像拉伸或留白。
- HTML 只需一个空
<div class="avatar"></div> - CSS 中设
background-image: url(...); background-size: cover; background-position: center; - 边框写在同一个元素上：
border: 4px solid #fff; border-radius: 50%; - 响应式时优先调
padding-bottom: 100%配合position: relative/absolute保圆
阴影、描边、SVG 外框这些进阶需求怎么加
纯白色圆形边框只是起点。如果要加阴影（比如浮起效果）、双层描边、或带渐变的环形外框，box-shadow 和伪元素最实用；SVG 方案灵活但成本高，仅建议用于需要动态换色或动画的运营头像组件。
容易踩的坑：box-shadow: 0 0 0 3px #fff 看似简洁，但在高 DPR 屏幕下可能发虚；而用 ::after 伪元素模拟外圈，必须确保父元素 position: relative，否则定位错乱。
- 单层白边+轻微阴影：
box-shadow: 0 0 0 3px #fff, 0 2px 6px rgba(0,0,0,0.1) - 双色环形边框：用
::before和::after分别画两层border-radius: 50%圆环 - 避免在
img上直接叠加多个box-shadow，会导致重绘性能下降，尤其列表页大量头像时
border-radius + 正方形尺寸）就能稳住；剩下那 10%，往往是忘了检查图片原始比例，或者在 Flex/Grid 容器里没设 align-items: center 导致垂直偏移——这点最容易被忽略。 
