这几日，随着小白对HTML5认识的提升，他自己没事浏览网页的时候总会把稳一些分外的展示效果，让他印象最深刻的一个效果便是用户头像了，一个矩形的图片怎么就显示成圆形了呢？一上午没想明白，下午看着老朱没什么事，就去向老朱请教：“朱哥！
网页上的图片怎么能显示成圆角呢？特殊是正圆形是怎么做出来的啊？”
老朱随口说道：“border-radius啊！
之前我们已经用过几次了啊！
”
小白说：“这不是掌握容器圆角的么？图片也可以掌握么？”
老朱说：“讲图片的时候我不是见告过你了么？肯定是没好好听，图片标签img也是一个容器，它是一个放图片的容器，在img里面显示什么图片是靠src属性来决定的。既然是容器你不是就可以用border-radius来掌握了么？你试试！
”
小白高兴的说道：“真的成圆角了啊！
我要把他变成正圆，是不是圆角设置成它宽度的一半就可以了？”
老朱说：“你先试试吧！
试玩就知道了！
”
“弗成啊！
这是怎么回事？”
老朱跟小白说：“css的圆角属性值最多是边的一半！
你的图片宽比高大，以是圆角值最多位高的一半！
你可以先考试测验把图片的宽高设置成一样的看看！
”
“果真变成正圆了，可是这样的话图片就有变形了，如果小头像的话还好说，大头像可就不好看了！
”
老朱说道：“以是现在很多网站头像上传的时候都会让用户截取一个正方形的图片天生头像，便是为了方便进行圆角掌握！
”
小白说：“有没有折中的方法？如果网站没有用户设置正方形头像的功能，还不想让图片变形呢？”
老朱说：“正圆显示切实其实定是一个高和宽一样的区域，以是图片被截取肯定是不可避免的了。你可以给图片外部套一个div容器，让这个div容器的宽度高度同等，并且设置超出隐蔽。这样设置一下div的圆角就可以了！
你试试看”
小白做好往后说道：“我又创造一个问题，div设置宽和高一样往后，图片如果高比宽小，图片高度得跟父容器高度同等才能出来效果！
而图片高比宽大，则须要设置图片宽度和父容器宽度同等。我以为要把它完善必须利用js来判断图片宽和高的比例进行动态设置。”
“嗯，你可以试试！
”
聪明的大家，你们有没有什么更好的图片圆角办法呢？
想学H5的朋友可以关注老炉，您的关注是我持续更新《小白HTML5发展之路》的动力！
