css如何把图片剪成圆形？

html-css034

css如何把图片剪成圆形？,第1张

<div style="width:100pxheight:100pxborder-radius:50%overflow:hidden">

<img src="">

</div>

需要浏览器支持CSS 3 ，注意div的宽高要一样，也可以直接把样式添加在img上，但不建议那样

在图片的外围加一个div框，然后通过这个框进行加宽高，然后用overflow:hidden来隐藏图片多余的部分。像现在很流行的圆形头像，其实图片是一张四方或者长方的图片。

然后通过对包住div的css加：border-radius:50%overflow:hidden就可以显示为圆形的图片了。关于这个是最方便的。也可以用这个方法解决图片的裁切问题。

希望我的解答可以帮到你，有什么不懂可以追问。