CSS3邊框和圓角

CSS3圓角

1、border-radius:一個最多可以指定四個border-*-radius屬性的複合屬性，爲元素添加圓角邊框
2、語法：border-radius:1-4 length|%/1-4 length|%
3、兼容：IE9+ firefox4+ chrome safari5+ opera

CSS3指定每一個圓角
1、多個值：四個值：第一個 - 左上角 第二個 - 右上角 第三個 - 右下角 第四個 - 左下角

2、三個值：第一個 - 左上角 第二個 - 右上角和左下角 第三個 - 右下角

3、兩個值：第一個值 - 左上和右下 第二個值 - 右上和左下

4、一個值：四個圓角相同

知識點：爲了滿足各個瀏覽器的兼容性，加上技術前綴。
-webkit-chrome
-moz-firefox
-ms-ie
-o-opera

CSS3盒陰影

1、box-shadow屬性：可以把設置一個或者多個下拉陰影的框
2、語法：box-shadow:h-shadow v–shadow blur spread color inset;
3、兼容：IE9+ firefox4+ chrome safari5+ opera

CSS3邊界圖片

1、border-image屬性：來構建美麗的可擴展按鈕
2、語法：border-image:source slice width outset repeat;
3、兼容：IE不兼容 firefox chrome safari6+ opera不兼容

border-image-source屬性

1、指定要使用的圖像，而不是border-style屬性設置的邊框樣式
2、語法：border-iamge-source:none|image;
border-image-slice屬性
1、指定圖像的邊界向內偏移
2、語法： border-iamge-slice:number | % |fill;
fill如下：

border-image-width屬性

1、指定圖像邊界的寬度
2、語法： border-iamge-width:number | % |auto;

border-image-outset屬性

1、指定在邊框的外部繪製border-image-area的量 – 邊框區域
2、語法：border-iamge-outset:number|length;

border-image-repeat屬性

1、圖像邊界是否會重複 2、語法：border-iamge-repeat: stretch | repeat | round | initial | inherit;