CSS3属性之圆角效果——border-radius属性

在css3之前，要实现圆角的效果可以通过图片或者用margin属性实现(可以参考这里：http://www.hicss.net/css-practise-of-image-round-box/)。实现过程很繁琐，但CSS3的到来简化了实现圆角的方式。

CSS3实现圆角需要使用border-radius属性，但因为浏览器兼容性的问题，在开发过程中要加私有前缀。

　border-radius属性其实可以分为四个其他的属性：

下面用几个实例来展示border-radius的具体用法。

1、border-radius单个属性值：

效果：


　　

2、border-radius是个属性值方式：

　效果：


　

不过在开发的过程中(我的工作中),经常用到的是border-radius单属性值，设置4个不同圆角的情况很少。

border-radius的优势不仅仅在制作圆角的边框，还是利用border-radius属性来画圆和半圆。

1、制作半圆的方法：

元素的高度是宽度的一半，左上角和右上角的半径元素的高度一致（大于高度也是可以的，至少为height值）。

效果:　


　

知道了如何画上半圆，就会举一反三画其他方向的圆了，这里不再赘述。

2、画实心圆的方法：

宽度和高度一致(正方形)，然后四个角设置为高度或者宽度的1/2.

效果：


　　

总结：

CSS3实现圆角的方式既优雅又方便，但是兼容性不够好，如果需要考虑旧版本的浏览器的话，可以考虑优雅降级的方式。开始提到的两种方式的优点是兼容性好，但不够优雅。