HTML5如何设置图片圆角_HTML5设置图片圆角操作【美化】
用 border-radius 直接给 加圆角最简单，需配合 display、object-fit 和固定宽高实现标准圆形头像，现代浏览器均原生支持，无需前缀。
用 border-radius 直接给
HTML5 本身不提供专门的“图片圆角”标签或属性，实际是靠 CSS 的 border-radius 控制。只要图片是块级或行内块元素（默认是行内元素，加 display: block 或 display: inline-block 更稳妥），就能生效。
-
border-radius: 50%是最常用写法，让图片变成正圆（前提是宽高等比） - 如果图片宽高不等，
50%会得到椭圆；要强制正圆，得先用width和height设为相等，再裁剪溢出：object-fit: cover - 避免只设
border-radius却忘了清除图片默认的vertical-align: baseline，否则下方可能留白
图片变形？记得配 object-fit 和固定尺寸
单纯加 border-radius 不解决拉伸或留黑边问题。尤其头像类场景，需要保持比例又填满容器。
- 给图片设固定宽高，比如
width: 120px; height: 120px; - 加上
object-fit: cover—— 裁剪居中显示，不拉伸 - 再加
border-radius: 50%，就得到标准圆形头像 - 别用
background-image替代，除非你不需要语义化、SEO 或图片懒加载支持
IE 不支持 border-radius？现在基本不用管了
IE9+ 已支持 border-radius，而 IE8 及更早版本已退出主流支持范围。现代项目（包括微信内置浏览器、iOS Safari、Chrome Android）全部原生支持，无需前缀或 polyfill。
- 不用写
-webkit-border-radius或-moz-border-radius - 如果真要兼容老系统（如某些政务内网），优先考虑降级为带边框的方形图，而不是强行 hack 圆角
- 注意：SVG 图片作为
时，border-radius同样生效，但 SVG 内部描边/裁剪逻辑不受影响
阴影、边框、过渡动画一起加？顺序和层级要注意
圆角常和 box-shadow、border、transition 搭配使用，但渲染顺序会影响视觉效果。
-
border在圆角内侧，box-shadow默认在圆角外侧 —— 这是正常行为 - 想让阴影也带圆角？确保没设置
overflow: hidden在父容器上（否则会裁掉阴影） - 加
transition: border-radius 0.3s实现鼠标悬停变圆角？注意：只有当图片尺寸固定时过渡才平滑；宽高用%或vw会导致计算不稳定 - 慎用
transform: scale()配合圆角 —— 放大后边缘可能发虚，尤其是低分辨率图
img.round-avatar {
width: 80px;
height: 80px;
border-radius: 50%;
object-fit: cover;
display: block;
margin: 0 auto;
}
圆角本身很简单，真正容易出问题的是尺寸控制、裁剪方式和组合样式之间的相互影响。特别是动态加载图片时，得等图片加载完成再应用样式，否则可能闪动或错位。
