知識點：
CSS3圓角
CSS3盒陰影
CSS3邊界圖片
一、CSS3圓角
border-radius屬性
一個最多可指定四個border-- radius屬性的復(fù)合屬性魄衅，這個屬性允許你為元素添加圓角邊框峭竣！
【語法】
border-radius:1-4 length|%/1-4 length|%;
【兼容性】
IE9+、FireFOX4+晃虫、Chrome皆撩、Safari5+、Opera
CSS3制定每個圓角
多值
四個值：第一個值為左上角，第二個值為右上角扛吞，第三個值為右下角呻惕，第四個值為左下角。
三個值：第一個值為左上角滥比，第二個值為右下角和左下角雅任，第三個值為右下角证膨。
兩個值：第一個值為左上角與右下角市框，第二個值為右上角和左下角摔握。
一個值：四個圓角值相同。
屬性
border-top-left-radius 定義了左上角的弧度
border-top-right-radius 定義了右上角的弧度
border-bottom-right-radius定義了右下角的弧度
border-bottom-left-radius定義了左下角的弧度
二寺滚、CSS3盒陰影
box-shadow屬性
box-shadow屬性可以設(shè)置一個或多個下拉陰影的框
案例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>盒陰影</title>
<style type="text/css">
div{
width: 300px;
height: 200px;
background-color: #f0f;
margin:0 auto;
}
div:hover{box-shadow:10px 10px 0 0 #bbb;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
【語法】
box-shadow:h-shadow v-shadow blur spread color inset;
【兼容性】
IE9+柑营、FireFOX4+、Chrome村视、Safari5+官套、Opera
三、CSS3邊界圖片
border-image屬性
使用border-image-*屬性來構(gòu)建美麗的可擴展按鈕
【可能的值】：
【語法】
border-image:source slice width outset repeat;
【兼容性】
IE不兼容蓖议、Firefox虏杰、Chrome讥蟆、Safari6+勒虾、Opera不兼容
CSS3邊界圖片詳解
1.border-image-source屬性
border-image-source屬性指定要使用的圖像，而不是由border-style屬性設(shè)置的邊框樣式
【語法】
border-image-source:none|image;
2.border-image-slice屬性
border-image-slice屬性制定圖像的邊界向內(nèi)偏移
【語法】
border-image-slice:number|%|fill;
3.border-image-width屬性
border-image-width屬性指定圖像邊界的寬度
【語法】
border-image-width:number|1%|auto;
4.border-image-outset屬性
border-image-outset用于指定在邊框外部繪制border-image-area的量
【語法】
border-image-outset:length|number;
5.border-image-repeat屬性
該屬性用于圖像邊界是否應(yīng)重復(fù)（repeated）瘸彤、拉伸（stretched）或鋪滿（rounded）
【語法】
border-image-repeat:stretch|repeat|round|initial|inherit;
