clip-path做圆头像，一行搞定！

博客主页瑕疵的CSDN主页 Gitee主页瑕疵的gitee主页⏩ 文章专栏《热点资讯》clip-path做圆头像一行搞定目录昨晚改头像border-radius 50% 一用头像在 flex 布局里直接拉成椭圆。气得我直接删了重写。别问问就是被 flex 拉伸的 bug 搞到吐血。核心根源border-radius 只对元素自身起作用。flex 布局会强制拉伸元素尺寸导致圆头像变椭圆。clip-path 是正解——它直接裁剪元素内容和布局无关。错误写法血泪史.avatar{clip-path:circle(50%);/* 缺少中心点坐标 */width:100px;height:100px;}浏览器会默认中心点在左上角0% 0%。结果头像只裁掉左上角右下角还挂着。正确写法一行搞定.avatar{clip-path:circle(50%at50%50%);/* 50%半径50% 50%中心点 */width:100px;/* 必须写宽高 */height:100px;}关键注释circle(50%)半径占元素50%即圆的直径元素宽高。at 50% 50%中心点坐标必须写不然报错。宽高必须指定没宽高clip-path 直接失效试过真坑。对比代码border-radius 写法clip-path 写法cssbr.avatar {br border-radius: 50%;br width: 100px;br height: 100px;br}brcssbr.avatar {br clip-path: circle(50% at 50% 50%);br width: 100px;br height: 100px;br}br问题flex 布局下头像变形优势无论父容器怎么变头像永远圆避坑总结必须写宽高没宽高clip-path 直接当没写。试过用max-width代替结果头像缩成针尖中心点坐标别省at 50% 50%不能写成at 50%。浏览器报Invalid value for clip-path调试到凌晨三点单位用 % 最安全别用 px/* 错误头像尺寸变圆就歪了 */clip-path:circle(50pxat50px50px);img 标签要指定宽高HTML 里width100 height100别漏。没写的话浏览器默认宽高图片原尺寸圆头像会糊最后说人话别再用 border-radius 了。clip-path 一行代码圆头像稳得一批。写完直接跑不用调 flex 布局。昨晚写完直接躺床上再也不用看头像变形的丑事了