css3边框

border属性是css盒子模型基础属性之一。

css2中border的属性

• border-width 边线宽度
• border-style 边框类型（必须有）
• border-color 边框颜色

css3中添加的border属性

• border-color
• border-image
• border-radius
• border-shadow

一、 border-radius

  兼容性：IE9+、Firefox 4+、Chrome、Safari 5+ 以及 Opera 支持 border-radius 属性。

  语法：

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

　解析：

　　四个值的顺序为：top-left、top-right、bottom-right、bottom-left（即顺时针顺序）

　　如果反斜杠‘/‘存在，若‘/‘存在，则前面的值设置为元素圆角的水平半径，后面的值为垂直方向的半径

     如果不存在，则圆角的水平方向的半径和垂直方向的半径相等。

     length设置的主要有如下四个场景：

• 　　border-radius：length{1}　　top-left、top-right、bottom-right、bottom-left四个值相等。
• 　　border-radius: length{2}　　top-left、bottom-right取第一个值，top-right、bottom-left取第二个值。
• 　　border-radius: length{3}　　top-left第一个值，top-right、bottom-left 第二个值 ，bottom-right第三个值
• 　　border-radius: length{4}　　top-left第一个值，top-right 第二个值 ，bottom-right第三个值，bottom-left第四个值

　　none： 默认值，表示没有圆角

　　派生出来的子属性：

　　border-top-left-radius: <length> [<length>]?

　　border-top-right-radius: <length> [<length>]?

　　border-bottom-right-radius: <length> [<length>]?

　　border-bottom-left-radius: <length> [<length>]?

　　实例：

　　不规则圆角边框

.radius{
    background:#ddd;
    width:300px;
    height:300px;
    border-radius:100px 80px 60px 40px / 50px 40px 30px 20px;
}

　　效果如下 ：

　　只设置左上圆角：

.radius{
    background:#ddd;
    width:300px;
    height:300px;
    border-top-left-radius:150px 70px;
}

　　效果如下：

　　圆形

.radius{
    background:#ddd;
    width:300px;
    height:300px;
    border-radius:150px;
}

　　半圆形

.radius{
    background:#ddd;
    width:300px;
    height:150px;
    border-radius:0 0 150px 150px;
}

　　扇形

.radius{
    background:#ddd;
    width:150px;
    height:150px;
    border-bottom-left-radius:150px;
}

　　椭圆

.radius{
    background:#ddd;
    width:300px;
    height:150px;
    border-radius:150px / 75px;
}

css3边框

原文：http://www.cnblogs.com/sanbao/p/5114010.html