知識點：
CSS3圓角
CSS3盒陰影
CSS3邊界圖片
一、CSS3圓角
border-radius屬性
一個最多可指定四個border-- radius屬性的復合屬性，這個屬性允許你為元素添加圓角邊框！
【語法】
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屬性可以設置一個或多個下拉陰影的框
案例
<!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-*屬性來構建美麗的可擴展按鈕
【可能的值】：
【語法】
border-image:source slice width outset repeat;
【兼容性】
IE不兼容、Firefox、Chrome、Safari6+、Opera不兼容
CSS3邊界圖片詳解
1.border-image-source屬性
border-image-source屬性指定要使用的圖像，而不是由border-style屬性設置的邊框樣式
【語法】
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屬性
該屬性用于圖像邊界是否應重復（repeated）、拉伸（stretched）或鋪滿（rounded）
【語法】
border-image-repeat:stretch|repeat|round|initial|inherit;
