css3新特性學習系列 -- border

css3新特性 border屬性（border-radius、border-image、box-shadow）詳解

一、border-radius  圓角

 　　支持：IE9+

　　 用法：

　　　　border-radius:25px 25px 25px 25px

　　　　有四個值，分別表示 top-left、top-right、bottom-right、bottom-left

div
{
    border:2px solid;
    border-radius:25px 25px 25px 25px; /*可簡寫爲 border-radius:25px */
    -moz-border-radius:25px; /* Old Firefox */
}

 

 

二、border-image  邊框圖片

　　支持：safari5及更早版本，須要前綴 -webkit；oprera須要前綴  -o；

　　用法：url圖片路徑;   裁剪位置（支持數值、百分比值），默認單位px，百分比相對於圖片而言； stretch爲默認值

　　　　border-image:url("image/border.png") 27 27 stretch;   /*stretch 拉伸*/

　　　　border-image:url("image/border.png") 27 27 round;   /*stretch 平鋪*/

　　　　border-image:url("image/border.png") 27 27 repeat;   /*repeat重複*/

　　　　border-image:url("image/border.png") 27 stretch/round/repeat;   /*合併相同的參數*/

　　注意：必須設置border寬度

　　實例：

　　border圖片（背景透明）

　　　　

　　

.border_css3{
            width:400px;
            height:100px;
            text-align:center;
            border:27px solid; /*必須設置border寬度*/
            border-image:url("image/border (1).png") 27 stretch;/*通用寫法 27爲裁剪位置 stretch拉伸 round平鋪 repeat重複*/
            -webkit-border-image: url("image/border (1).png") 27 stretch; /* Safari 和 Chrome */
            -moz-border-image: url("image/border (1).png") 27 stretch; /* 老的 Firefox */
            -o-border-image: url("image/border (1).png") 27 stretch; /* Opera */   /*IE不支持*/
            /*border-radius: 10px;*/
            /*box-shadow: 1px 2px 3px #ccc,-1px 2px 3px #ccc,1px -2px 3px #ccc,-1px -2px #ccc;*/
        }

　　效果以下，更詳細的解析請移步：http://www.zhangxinxu.com/wordpress/2010/01/css3-border-image/

　　

　　

　　

 

　　

 

三、box-shadow

　　支持：IE9+、chrome、opera、safari5.1.1支持

　　用法：

　　　　　　box-shadow:h-shadow v-shadow blur spread color inset;

　　　　　h-shadow:水平陰影的位置，容許負值，必須值；

　　　　　v-shadow：垂直陰影位置，容許負值，必須值；

　　　　　blur：模糊距離；

　　　　    spread：陰影尺寸；

　　　　    color：陰影顏色；

　　　　　inset：內陰影；

　　實例：

.border_css3{
            width:400px;
            height:100px;
            box-shadow:0px 0px 8px 6px rgba(0,0,0,0.8);
        }

　　效果：