网页实现圆角

在做网页的时候，常常需要实现圆角，以前的做法就是切图，现在就方便了，用css3里面的 border-radius 属性就可以直接实现。

border-radius 是一种缩写方法。另外其四个值是按照top-left、top-right、bottom-right、bottom-left的顺序来设置的其主要会有下面几种情形出现：

四个值:第一个值为左上角，第二个值为右上角，第三个值为右下角，第四个值为左下角。三个值:第一个值为左上角, 第二个值为右上角和左下角，第三个值为右下角两个值:第一个值为左上角与右下角，第二个值为右上角与左下角一个值：四个圆角值相同

使用 CSS3 border-radius 属性，可以给任何元素制作 “圆角”。背景颜色、边框、背景图片等

1. 指定背景颜色的元素圆角：

   

圆角

 

2. 指定边框的元素圆角:

圆角

3. 指定背景图片的元素圆角:

圆角