學習CSS3邊框的新特性：
1、border-color（設置邊框顏色）
2、border-image（設置邊框為圖片）
3、border-radius（邊框的半徑）
4、box-shadow（陰影效果）
瀏覽器兼容：
-
FireFox拓展前綴：-moz-CSS3屬性：值
-
Chrome和Safari拓展前綴：-webkit-CSS3屬性：值
-
Opera拓展前綴：-o-CSS3屬性：值
-
IE9拓展前綴：-ms-CSS3屬性：值
-
IE6/7/8：詳情見此（兼容大部分CSS3屬性）（有副作用！）
border-color：設置邊框顏色（只有firefox支持，其他瀏覽器不兼容）
border-color和傳統的設置邊框顏色不同，border-color可以設置每一條邊框具體由哪幾種顏色組成個，每個顏色代表一個像素，如果邊框像素大於顏色個數，由最后一個顏色填滿剩余像素。
語法：
-
border-top-color（上）
-
border-right-color（右）
-
border-bottom-color（下）
-
border-left-color（左）
例子：
border-top-colors:Blue Yellow Red Black Green;
border-bottom-colors:Blue Yellow Red Black Green;
border-right-colors:Blue Yellow Red Black Green;
border-left-colors:Blue Yellow Red Black Green;
border-image：設置邊框為圖片（通過圖片來填充邊框）
語法：
-
border-image-source：指定border的背景圖的url
-
border-image-slice：設置圖片從多少像素開始切割
-
border-image-width：定義邊框的寬度（不起作用，用border-width）
-
border-image-repea：指定圖片顯示的方法（stretch 拉伸，repeat 重復，round 平鋪，默認為stretch 拉伸）
例子：
-moz-border-image: url(***) 0 14 0 14 stretch; /* 老版本的 Firefox */
-webkit-border-image: url(***) 0 14 0 14 stretch; /* Safari */
-o-border-image: url(***) 0 14 0 14 stretch; /* Opera */
border-image: url(***) 0 14 0 14 stretch;
border-radius：邊框的半徑（圓角）
語法：border-radius （不能為負數，0為直角）
-
一個參數：定義四個角的半徑；
-
兩個參數：第一個參數定義左上角和右下角，第二個參數定義右上角和左下角；
-
三個參數：第一個參數定義左上角，第二個參數定義右上角和左下角，第三個參數定義右下角；
-
四個參數：分別相對於 左上，右上，右下，左下；
-
八個參數：前四個相對於 左上，右上，右下，左下的X軸，后四個相對於 左上，右上，右下，左下的Y軸；
例子：
border-radius:50%（圓形）
box-shadow：陰影效果（給元素塊添加）
語法：
box-shadow:[inset] x-offset y-offset blur-radius spread-radius color；
-
inset：陰影類型。可選，默認投影類型為外陰影。如果設為inset，為內陰影。
-
x-offset：X軸偏移量。必選 正值，陰影在對象右邊，負值，陰影在對象左邊。
-
y-offset：Y軸偏移量。必選 正值，陰影在對象下邊，負值，陰影在對象上邊。
-
blur-radius：陰影模糊半徑。可選 值越大邊緣越模糊。0表示沒有模糊效果。
-
spread-radius：陰影擴展半徑。可選 正直，陰影擴散，負值，陰影縮小。
-
color：陰影顏色。可選（建議不要省略）各大瀏覽器默認值不一致。