border-radius 圆角边框详解一

一 圆角边框的语法

border-radius: none|<length>{1,4}[/length]{1,4}

 <length>： 由浮点数字和单位标识符组成的长度值。不可为负值。

 

二 说明

border-radius是一种缩写方法。如果“/”前后的值都存在，那么“/”前面的值设置其水平半径，“/”后面值设置其垂直半径。如果没有 “/”，则水平和垂直半径相等。另外其四个值是按照top-left、top-right、bottom-right、bottom-left的顺序来设 置的其主要会有下面几种情形出现：

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

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

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

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

　　另外需要特别注意的是，border-radius一定要放置在-moz-border-radius和-webkit-border-radius后面

 

   

三 特殊说明

　　一、对于border-radius还有一个内半径和外半径的区别，它主要是元素 边框值较大时，效果就很明显，当我们border-radius半径值小于或等于border的厚度时，我们边框内部就不具有圆角效果,例如下面的实例

　　

　　效果

　　

   可以看到 边框有变化 但是里面的内容边框是没有变化的。把 border-radius半径值改成比边框值大一点：border-radius: 25px;

　

　　相应的 外面的边框也是变大 里面的边框也出现了。

二、如果角的两个相邻边有不同的宽度，那么这个角将会从宽的边平滑过度到窄的边。其中一条边甚至可以是0。相邻转角是由大向小转。

 

三、相邻两条边颜色和线条样式不同时，那么两条相邻边颜色和样式转变的中心点是在一个和两边宽度成正比的角上。比如，两条边宽度相同，这个点就是一个 45°的角上，如果一条边是另外一条边的两倍，那么这个点就在一个30°的角上。界定这个转变的线就是连接在内外曲线上的两个点的直线。我们来看一个四边 颜色不一样，宽度不一样的实例：

　　

　　效果