border-radius是唯一靠谱方案，必须同时满足：width和height数值相等、显式设置border-radius:50%、配合object-fit:cover及display:block，否则仅显示圆角边框而非真圆裁剪。
border-radius 是唯一靠谱的方案，别碰 img 的 border 属性，也别用废弃的 border="1" 写法。它不控制边框粗细，只定义“可视区域边界形状”，是否真正裁剪内容，取决于尺寸、容器和渲染环境。
为什么加了 border-radius: 50% 图片还是方的或椭圆？
根本不是 CSS 写错了，而是浏览器没裁——border-radius 本身不强制隐藏溢出内容。必须同时满足：
-
width和height数值相等（如width: 120px; height: 120px;），不能是width: 100%; height: auto; - 若作用于
<img alt="HTML怎么设置图片外边框圆角代码_网页图片修饰【案例】" >自身：现代浏览器（Chrome 4+、Firefox 4+、Safari 5.1+、Edge）默认裁剪，但旧版 Safari 或 Android WebView 可能失效 - 若作用于父容器（如
<div>）：必须显式写 <code>overflow: hidden，否则图片照常溢出 - 非正方形原图（如 600×400）直接套
border-radius: 50%，结果一定是椭圆——因为百分比按宽高分别计算 - 设固定宽高：
width: 80px; height: 80px;（不能用百分比或auto） - 加圆角：
border-radius: 50%; - 防拉伸/留白：
object-fit: cover;+display: block;（避免行内元素默认下边距） - 提前把图片处理成正方形（如 200×200 像素）
- 用 HTML 属性
width="200"（比style="width:200px"更稳） - 内联写
style="border-radius: 50%;"
怎么让 <img alt="HTML怎么设置图片外边框圆角代码_网页图片修饰【案例】" > 真正变圆？三步写死
优先直接作用于 <img alt="HTML怎么设置图片外边框圆角代码_网页图片修饰【案例】" >，最简可控：
完整示例：<img src="avatar.jpg" style="max-width:90%" alt="HTML怎么设置图片外边框圆角代码_网页图片修饰【案例】" >
立即学习“前端免费学习笔记（深入）”；
邮件里怎么安全实现圆形头像？
Gmail、Outlook Web 会剥离 <style></style> 块，object-fit 也被忽略，唯一可靠路径是：
示例：<img src="avatar.jpg" alt="User" style="max-width:90%" style="border-radius: 50%;">
复杂点在于：圆不是靠一个属性画出来的，而是靠“正方形尺寸 + 圆角声明 + 裁剪机制”三者咬合。漏掉任一环，就只是个带弧度的边框，不是真圆。
