HTML小技巧：使用CSS3属性绘制圆形元素和图片

在印象中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%;"/>

变成圆形图片：

演示中图片本身是正方向，如果长方形图片就会变成椭圆。

---

关于更多border-radius属性的资料，建议看下w3c的文档，文档中还有详细演示链接。 

在线演示：css-draw-circle.html

案例下载：DOWNLOAD

演示页面中还额外展示了不同的圆角样式，有兴趣的朋友可以看下：

---

---

---