在印象中HTML的元素都是正正方方的。但是我们可以利用CSS3的border-radius属性将元素的边框圆角化，甚至可以实现圆形的绘制，以此为基础还可以对图片进行操作，将图片圆形化。
其实要利用CSS绘制圆形只要设置border-radius属性为50%即可，主要的原理就是利用此属性将元素的边框圆角化，控制圆角化的角度形成一个圆形。
将方形div元素变成圆形
首先我们绘制出一个长宽都为100px，且背景色为蓝色的正方形div元素：
<div style="width:100px;height:100px;background-color:#0000ff;"></div>
最终形成结果如下图：
然后将这个div元素的border-radius样式设置为50%：
<div style="width:100px;height:100px;background-color:#0000ff;border-radius:50%;"></div>
最终结果：
这样就成功绘制了一个圆形的div元素，如果原本的div是长方形，设置50%的圆角边框就会形成椭圆形。另外其他的元素标签页可以使用border-radius属性。
将方形图片变成圆形
掌握了上面的要点，我们可以加以利用，将这个技巧运用到图片元素上，这样就可以将原本是方形的图片变成圆形。
正方形原图：
对img元素设置圆角边框，使其变成圆形图片：
<img src="img-square.png" style="border-radius:50%;"/>
变成圆形图片：
演示中图片本身是正方向，如果长方形图片就会变成椭圆。
PS：需要注意浏览器兼容的问题，特别是IE8（包含）以下版本的浏览器是不支持CSS3的border-radius属性的，所以遇到浏览器不兼容的情况就会被打回原形，变成原本的方形。
关于更多border-radius属性的资料，建议看下w3c的文档，文档中还有详细演示链接。
在线演示：css-draw-circle.html
案例下载：DOWNLOAD
演示页面中还额外展示了不同的圆角样式，有兴趣的朋友可以看下：
原创文章，作者：ItWorker，如若转载，请注明出处：https://blog.ytso.com/tech/pnotes/98736.html