css3 Border屬性

 css3中關於Border的屬性一共有三個：圓角border-radius,圖片邊框border-image,邊框多顏色border-color,其中圓角border-radius是常用的一個屬性。

一、圓角border-radius

1、語法

border-radius ： none | <length>{1,4} [/ <length>{1,4} ]?

<length>： 由浮點數字和單位標識符組成的長度值。不可爲負值。

2、變化說明

border-radius是一種縮寫方法。如果“/”前後的值都存在，那麼“/”前面的值設置其水平半徑，“/”後面值設置其垂直半徑。如果沒有“/”，則水平和垂直半徑相等。另外其四個值是按照top-left、top-right、bottom-right、bottom-left的順序來設置的其主要會有下面幾種情形出現：

 

1)border-radius: [ <length>{1,4} ];

這裏只有一個值，那麼top-left、top-right、bottom-right、bottom-left四個值相等

2)border-radius:[ <length>{1,4} ]  [ <length>{1,4} ] ;

這裏設置兩個值，那麼top-left等於bottom-right，並且取第一個值；top-right等於bottom-left，並且取第二個值

3)border-radius:[ <length>{1,4} ]   [ <length>{1,4} ]   [ <length>{1,4} ];

如果有三個值，其中第一個值是設置top-left;而第二個值是top-right和bottom-left並且他們會相等,第三個值是設置bottom-right

4)border-radius:[ <length>{1,4} ]   [ <length>{1,4} ]  [ <length>{1,4} ]   [ <length>{1,4} ];

如果有四個值，其中第一個值是設置top-left;而第二個值是top-right,第三個值bottom-right,第四個值是設置bottom-left

 

前面，我們主要看了border-radius的縮寫格式，其實border-radius和border屬性一樣，還可以把各個角單獨拆分出來，也就是以下四種寫法，這裏我規納一點，他們都是先Y軸再X軸，具體看下面：

border-top-left-radius: <length>  <length>   //左上角
border-top-right-radius: <length>  <length>  //右上角
border-bottom-right-radius:<length>  <length>  //右下角
border-bottom-left-radius:<length>  <length>   //左下角

border-radius只有在以下版本的瀏覽器：Firefox4.0+、Safari5.0+、Google Chrome 10.0+、Opera 10.5+、IE9+支持border-radius標準語法格式，對於老版的瀏覽器，border-radius需要根據不同的瀏覽器內核添加不同的前綴，比說Mozilla內核需要加上“-moz”，而Webkit內核需要加上“-webkit”等。（border-radius一定要放置在-moz-border-radius和-webkit-border-radius後面）

圓角參考傳送門

二、圖片邊框border-color

 1、css2的border-color屬性應用

border-color: <color>/*其中可以上一個值，也可以是多個值，具體我在這裏不多說了，大家來時用到的也特別多*/
/*我們可以分別給各邊上色*/
border-top-color: <color>/*給上邊框上色*/
border-right-color: <color> /*給右邊框上色*/
border-bottom-color:<color> /*給下邊框上色*/
border-left-color: <color> /*給左框上色*/

2、css3的border-color屬性

首先css3的border-color屬性現在只有Firefox3.0+瀏覽器支持，

所以css3的border-color屬性只有一種寫法：

-moz-border-top-colors: red blue white white black;
-moz-border-right-colors: red blue white white black;
-moz-border-bottom-colors: red blue white white black;
-moz-border-left-colors: red blue white white black;

這樣同一屬性下可以寫多個顏色值，由外而內地產生漸變的效果。

border-color參考傳送門

三、邊框多顏色border-image

1、語法

border-image ： none | <image> [ <number> | <percentage>]{1,4} [ / <border-width>{1,4} ]? [ stretch | repeat | round ]{0,2}

簡單的來介紹一下border-image的參數，讓大家在腦海中有下初步的概念：

1)none:是border-image的默認值，如果取值爲none時，表示邊框無背景圖片；

2)<image>：設置border-image的背景圖片，這個跟background-image一樣，使用絕對或相對的url地址，來指定背景圖片；

3)<number>：number是一個數值，用來設置邊框的寬度，其單位是px，其實就像border-width一樣取值，可以使用1~4個值，其具體表示四個方位的值，大家可以參考border-width的設置方式；

4)<percntage>：percntage也是用來設置邊框的寬度，跟number不同之處是，其使用的是百分比值來設置邊框寬度；

5)stretch,repeat,round:他們是用來設置邊框背景圖片的鋪放方式，類似於background-position，其中stretch是拉伸，repeat是重複，round是平鋪，stretch爲默認值。

2、示例

可以把border-image分解爲：

1)引入圖片：border-image-source；

border-image-source:url(image url);/*image url可以是相對地址也可以是絕對地址*/

2)切割引入的圖片：border-image-slice；

border-image-slice: [ <number> | <percentage>]{1,4}&& fill?

3)邊框的寬度：border-image-width；

border-image-width: [ <length> | <percentage> | <number> | auto ]{1,4}

4)圖片的排列方式：border-image-repeat。

border-image-repeat: [ stretch | repeat | round ]{1,2}

stretch：拉伸效果  

repeat：水平重複效果

round：水平平鋪效果

border-image參考傳送門