CSS3新特性：实现圆角border-radius

属性简介

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

注释：按此顺序设置每个 radii 的四个值。如果省略 bottom-left，则与 top-right 相同。如果省略 bottom-right，则与 top-left 相同。如果省略top-right，则与 top-left 相同。

length

定义圆角的形状。

%

以百分比定义圆角的形状。

实例

最简单的圆

#circle {
    height: 100px;
    width: 100px;
    border-radius: 50%;
    background-color: blue;
}

半圆

#half-circle {
    height: 100px;
    width: 50px;
    border-radius: 50px 0 0 50px;
    background-color: orange;
}

* 看代码

四分之一圆

#quarter-circle {
    height: 100px;
    width: 100px;
    border-radius: 100px 0 0 0;
    background-color: orange;
}

空心四分之一圆

#hollow-quarter-circle {
    height: 100px;
    width: 100px;
    border: 2px solid orange;
    border-radius: 100px 0 0 0;
}

模拟月食

Click me to see

水平半径和垂直半径

根据定义border-radius ： none | <length>{1,4} [/ <length>{1,4} ]?;
我们可以看出border-radius最多可以有8个参数，用／等分。前四个代表圆角的水平半径，后四个代表圆角的竖直半径，分别表示高中数学中椭圆的x轴 截距和y轴截距

我们可以用这个特征花一些椭圆

#ellipse {
    height: 50px;
    width: 100px;
    border-radius: 100px / 50px;
    background-color: orange;
}

应用：Oprera浏览器logo

#opera-outter {
    display: inline-block;
    width: 180px;
    height: 200px;
    border-radius: 180px / 200px;
    background-color: red;
}
#opera-inner {
    display: inline-block;
    width: 100px;
    height: 160px;
    margin-top: 20px;
    border-radius: 100px / 160px;
    background-color: white;
}