CSS-3 圆角Border-radius 的使用

那么早些年 圆角其实是有的，后来的草案中将它去掉了，现在从CSS3开始，又加入了回来。可以看出圆角的使用还是非常广泛的。

那么在圆角还没有被加入进来之前，我们要实现圆角的效果，可能就是需要IMG图片来模拟了，定位到各个角落上。那么接下来简单的介绍有关圆角的使用，以及提供一些网上找到非常好的网址。

设置圆角的规格其实跟边框的规格差不多，如下：

1、border-radius: [ {1,4} ]; //这里只有一个值，那么top-left、top-right、bottom-right、bottom-left四个值相等

2、border-radius:[ {1,4} ] [ {1,4} ] ; //这里设置两个值，那么top-left等于bottom-right，并且取第一个值；top-right等于bottom-left，并且取第二个值

3、border-radius:[ {1,4} ] [ {1,4} ] [ {1,4} ];//如果有三个值，其中第一个值是设置top-left;而第二个值是top-right和bottom-left并且他们会相等,第三个值是设置bottom-right

4、border-radius:[ {1,4} ] [ {1,4} ] [ {1,4} ] [ {1,4} ];//如果有四个值，其中第一个值是设置top-left;而第二个值是top-right,第三个值bottom-right,第四个值是设置bottom-left

border-top-left-radius: <length>  <length>   //左上角
border-top-right-radius: <length>  <length>  //右上角
border-bottom-right-radius:<length>  <length>  //右下角
border-bottom-left-radius:<length>  <length>   //左下角

这里说一下，各角拆分出来取值方式： 中第一个值是圆角水平半径，第二个值是垂直半径,如果第二个值省略，那么其等于第一个值，这时这个角就是一个四分之一的圆角，如果任意一个值为0，那么这个角就不是圆角。

border-radius: 水平1 水平2 / 垂直1 垂直2：设置了两个水平值和两个垂直值，此时我们top-left和bottom-right具有相同的水平和垂直半径，也就是其中的水平1和垂直1；而top-right和bottom-left也具有相同的水平和垂直半径值，也就是水平2和垂直2，我们他拆分出来就是：

border-top-left-radius: 水平1 垂直1；

border-bottom-right-radius: 水平1 垂直1；

border-top-right-radius: 水平2 垂直2；

border-bottom-left-radius: 水平2 垂直2;

具体我们来看下面的实例：

.demo {
  border-radius: 10px 20px / 20px 10px;
}

等价于：

.demo {
  border-top-left-radius: 10px 20px;
  border-bottom-right-radius: 10px 20px;
  border-top-right-radius: 20px 10px;
  border-bottom-left-radius: 20px 10px;
}

边框的宽度一定要小于圆角，不然内圆角就出不来。

在img上应用border-radius到目前只有Firefox4.0+浏览器才正常，而在其他浏览器都不能对图片进行剪切。

参考网址A