用CSS3的圆角border-radius属性,画一个圆形

习惯了方方框框，我们会使用圆角技术使网页变得很圆润，而不是一个个棱角。圆角被广泛运用于网页中，比如把边框加个圆角，这是最流行的用法，让网页看起来很舒服。还有就是用户的头像，把它做成一个圆形的，看到现在的网页中出现的频率也很大。

以前制作圆角的方法比较繁琐，山顶角、洋葱皮、PS切图、制图…一系列的技巧，而现在我们可以利用CSS3的一个属性就可以轻松实现圆角，甚至是各种畸形的形状。

border-radius语法

border-radius ： none | {1,4} [ / {1,4} ]?

相关属性： border-top-right-radius , border-bottom-right-radius , border-bottom-left-radius , border-top-left-radius

在线的border-radius工具：http://border-radius.com/

关于兼容性：看过别人写过的一篇文章，说的如果你的网站弹出请使用xx浏览器以达到最佳的用户体验，说明你已经落伍了。其实兼容性对于大型网站来说还是很重要的，但一般自己的博客就不必做大量的兼容了，Chrome都换了自家的内核，opera换了Webkit，IE版本都到11了，可以放心地使用CSS3的一些属性了。IE9+支持，border-radius 属性Opera和IE不用设置，语法可以这么写：

-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;

border-radius的一些用法

利用border-radius可以设置四个角不同的radius，可以用boder加上不同的边框，用不同的背景background使元素实心或者空心，总之你可以利用很多技巧来使元素变得与众不同。

用border-radius画一个圆

width: 200px;
height: 200px;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;   //这里的值就是100px