CSS3 border-radius 浅析

 

1.border-radius的基本语法：

border-radius：[ <length> | <percentage> ]{1,4} [ / [ <length> | <percentage> ]{1,4} ]?

它提供2组参数值：1水平参数（horizontal）；2.垂直参数（vertical）。两组参数直接用左斜杠“/”隔开。每一组参数有4个参数值，遵循“上右下左”的简写规则。

　　/* 数值的取值范围：任意一个数值的最小值是0，最大值是对应边的边长 */

 

2.现在以完整输入2组共8个参数值的方式来对一个元素设置border-radius属性。

<style type="text/css">
        .box {
            margin: 20px;
            width: 200px;
            height: 200px;
            background-color: #000000;
            border-radius: 100px 60px 40px 10px /20px 40px 60px 80px;
        }
</style>
        

 

 将看到以下效果图：

其中，horizontal表示水平参数（以下简称 h），vertical表示垂直参数（以下简称 v）。

属性设置与图中数值的对应关系：

100px 60px 40px 10px /20px 40px 60px 80px;
h_1, h_2, h_3, h_4, /  v_1, v_2, v_3, v_4, ;

 

/*  而任意的一对参数值（h/v_n），都是一对半径值。如果两个值相等，则会切割出一个1/4圆，如果不相等，则会切割出一个1/4椭圆。  */

 以上图的左上角为例：

　　1.以左上定点为起点，向左偏移 h_1=100，向下偏移 v_1=20，得到圆心 O。

　　2.然后以 r_1=h_1=100,r_2=v_1=20, 得到一个椭圆（红色区域）。

　　3.取1/4椭圆，覆盖元素的左上角的图形（绿色区域）。

 

椭圆中两个同心圆的半径的关系图：

其中：a 为大圆半径，b 为小圆半径。那么这个椭圆的1/4就相当于元素中一个角被切割成的形状。

 

3.以下是使用border-radius画出的图形：

 1.正圆：

        .box_1 {
            width: 100px;
            height: 100px;
            background-color: #000000;
            border-radius: 50px;
        }

 

 

 

2. 1/4圆：

        .box_2 {
            width: 100px;
            height: 100px;
            background-color: #000000;
            border-radius: 100px 0 0 0;
        }

 

 

 

3. 1/2圆：

        .box_3 {
            width: 50px;
            height: 100px;
            background-color: #000000;
            border-radius: 50px 0 0 50px;
        }

 

 

 

4.椭圆：

        .box_4 {
            width: 100px;
            height: 50px;
            background-color: #000000;
            border-radius: 50px/25px;
        }

 

 

 

5.鸡蛋型：

        .box_5 {
            width: 80px;
            height: 110px;
            background-color: #000000;
            border-radius: 40px/70px 70px 40px 40px;
        }

 

 

---

The end.

by Little

---