css3中背景屬性中與邊框相關的屬性介紹

本篇文章給大家帶來的內容是關於css3中背景屬性中與邊框相關的屬性介紹 ，有一定的參考價值，有需要的朋友可以參考一下，希望對你有所協助。

1 與背景相關的新增屬性

background-clip：指定背景的顯示範圍。

background-origin：指定繪製背景映像時的起點。

background-size：指定背景中映像的尺寸。

background-break：指定內嵌元素的背景映像進行平鋪時的迴圈方式。

注意：

Firefox瀏覽器：支援除了background-size屬性之外的其他三個屬性，需在屬性前加上“-moz-”文字。使用background-break時需寫“-moz-background-inline-policy”。

Safari、Google Chorme、Opera：支援除了background-break之外的其他三個屬性，需在屬性前加“”“-webkit-”文字。

2 指定背景的顯示範圍-background-clip屬性

（1）背景的顯示範圍

CSS2：背景的顯示範圍是指內部補白之內的範圍，不包括邊框。

CSS2.1乃至CSS3：背景的顯示範圍是指包括邊框在內的範圍。

（2）屬性值

border：背景範圍包括邊框地區。

padding：背景範圍不包括邊框地區。

div.div1{          -moz-background-clip：border;         -webkit-background-clip：border;}div.div2{          -moz-background-clip：padding;         -webkit-background-clip：padding;}

3 指定繪製背景映像時的起點-background-origin屬性

（1）在繪製背景映像時，預設是從內容補白地區的左上方開始繪製的。

（2）值

border：從邊框的左上方開始繪製

padding：從內容補白地區的左上方開始繪製

content：從內容的左上方開始繪製

（3）瀏覽器不同

Firefox：”-moz-background-origin”；

Safari、Chorme：“-webkit-background-origin”

（4）雖然將background-clip屬性指定為padding的時候，邊框點劃線中點與點之間的映像不會顯示，但是仍然可以通過將background-origin屬性指定為border的方法來指定從邊框的左上方開始繪製。

4 指定背景中映像的尺寸-background-size屬性

（1）使用方法

background-size：映像元素的寬度 高度；

（2）瀏覽器支援：

到目前為止：Safari3、Chrome8 、Firefox4、Opera10瀏覽器支援該屬性。

（3）如果要維持映像的縱橫比例，可以在設定映像寬度與高度時，將另一個參數設為auto

（4）只指定一個參數

瀏覽器中將該值作為寬度值，auto作為高度值進行處理。

（5）使用百分比的值作為參數

瀏覽器中將指定的百分比視為映像尺寸除以整個邊框地區的尺寸後得出的百分比來處理

（6）contain關鍵字作為參數

這將把原始映像在維持縱橫比的前提下自動方大或縮小，以使原始映像的寬度或高度完全等於元素的寬度或高度（確保映像能被完整顯示在元素中）

（7）cover關鍵字作為參數

這會使原始映像在維持縱橫比的前提下將背景映像自動縮放到填滿元素內部，如果元素的長寬比例與原始映像的長寬比例不一致，那麼多餘部分將被剪去。

5 新增的用於平鋪背景映像的選擇----space與round

（1）space

在水平方向或垂直方向平鋪背景映像時並不裁減掉映像超出背景的部分，也不會調整背景映像尺寸，而是自動調整映像與映像之間的間距。

（2）round

在水平方向或垂直方向平鋪背景映像時並不裁減掉映像超出背景的部分，而是會自動調整背景映像的尺寸。

（3）瀏覽器支援

到目前為止：IE9以上、Chrome 、Opera瀏覽器支援該屬性。

div{     background-repeat：space；//round}

6 在一個元素中顯示多個背景映像

在CSS3中可以在一個元素中顯示多個背景圖片，還可以將多個背景圖片進行重疊顯示，從而使得調整背景映像中所使用的素材變得更加容易。

div{     background-image：url（flowe-red.png），url（flower-green.png），url（sky.png）；     background-repeat：no-repeat，repeat-x，no-repeat；     background-position：3% 98%，85%，center center，top；}

（1）使用background-image屬性來指定影像檔的時候，指定的時候是按在瀏覽器中顯示時映像疊放的順序從上往下指定的，第一個影像檔是放在最上面的，最後指定的檔案是放在最下面的。

（2）通過多個background-repeat屬性與background-position屬性的指定，可以單獨指定背景映像中某個影像檔的平鋪方式與置放位置。

（3）允許被多重指定並配合多個影像檔一起利用的屬性如下：

background-image、background-repeat、background-position、background-size、background-clip、background-origin。

7 使用漸層色背景

CSS3中，支援對於元素指定漸層色背景。所謂漸層是指從一種顏色慢慢過渡到另一種顏色。漸層分為線性漸層與放射性漸層。

繪製線性漸層

background：linear-gradient（to bottom，orange，black）

使用linear-gradient函數實現線性漸層，函數中使用三個參數。

（1）第一個參數值：

to bottom：指定從上往下的漸層，預設漸層起點為元素頂端，漸層重點為元素底端。

to bottom right：指定從左上往右下的漸層，預設漸層起點為元素左上方，漸層終點為元素右下角。

to right：指定從左往右的漸層，預設漸層起點為元素左邊，漸層重點為元素右邊。

to up right：指定從左下往右上的漸層，預設漸層起點為元素左下角，漸層終點為元素右上方。

to up：指定從下往上的漸層，預設漸層起點為元素底端，漸層終點為元素頂端。

to up left：指定從右下往左上的漸層，預設漸層起點為元素右下角，漸層終點為元素左上方。

to left：指定從右往左的漸層，預設漸層起點為元素右邊，漸層終點為原左邊。

to bottom left：指定從右上往左下的漸層，預設漸層起點為元素右上方，漸層終點為元素左下角。

可指定一個角度，用於指定漸層線的旋轉角度

（2）第二個參數值代表漸層的起點色，第三個參數代表漸層的終點色。

div{    width：300px；    height：300px；    background：linear-gradient（to bottom，orange，black）//從頂端到底端、從桔色到黑色的線性漸層}

（3）將第一個參數指定為一個角度，其作用為修改漸層線的角度

background：linear-gradient（30deg，orange，black）；

如果角度為0，則漸層線的方向為從下往上，當角度增加時漸層線順時針方向旋轉。

（4）可以在起點色或終點色後邊指定離漸層色起點或漸層色終點的偏離位置（不指定時預設值分別為0%及100%）

background：linear-gradient（to bottom，orange 20%，black 70%）；

表示從p元素的頂端往下20%，即離元素頂端300（元素高度）*20%=60像素處開始漸層，一直漸層到離元素底端30%（100%-70%），即離元素底端300*30%=90像素處停止漸層。

（5）可以添加多個漸層的中間點

background：linear-gradient（to bottom，orange 0%，red 25%，yellow 50%，green 75%，black 100%）；

繪製放射性漸層

background：radial-gradient（orange，black）；

使用radial-gradient函數實現放射性漸層，函數使用兩個參數，分別為漸層起點色與漸層終點色。

div{     background：radial-gradient（orange，black）；//從中心向外擴散，從桔色到黑色的放射性漸層；}

（1）可以通過circle關鍵字或ellipse關鍵字指定繪製漸層呈圓形向外擴散方式還是呈橢圓形向外擴散方式。

div{     background：radial-gradient（circle，orange，black）；//指定圓形漸層方式}

（2）可以通過at關鍵字指定漸層起點位置

background：radial-gradient（at left top，orange，black）；

可指定如下選項值：

center center：從元素中心點向外擴散（預設選項值）

left top：從元素左上方向外擴散

center top：從元素頂部中央向外擴散

right top：從元素右上方向外擴散

right center：從元素右端中央向外擴散

right bottom：從元素右下角向外擴散

center bottom：從元素底部中央向外擴散

left bottom：從元素左上方向外擴散

座標值：例如（30,50），從指定座標點處向外擴散

background：radial-gradient（circle at center top，orange，black）；background：radial-gradient（ at 130px 50px，orange，black）；

（3）指定漸層尺寸

closest-side：可漸層到離漸層起點最近的一條邊。

farthest-side：可漸層到離漸層起點最遠的一條邊。

closest-corner：可漸層到離漸層起點最近的一個角。

farthest-corner：可漸層到離漸層起點最遠的一個角。

background：radial-gradient（ ellipse closest-side at 130px 50px，orange，black）；

（4）可通過對圓形漸層指定半徑的方法指定漸層尺寸

background：radial-gradient（ circle 95px at 130px 50px，orange，black）；

（5）可通過對橢圓形漸層指定橫向半徑及縱向半徑的方法指定漸層尺寸

background：radial-gradient（ ellipse 235px 95px at 130px 50px，orange，black）；

（6）可通過添加多個漸層色並指定偏離百分比的方法在漸層起點與漸層終點中添加多個漸層中間點

background：radial-gradient（ circle 130px at130px 50px，orange 0%，red 25%，yellow 50%，green 75%，black）；

8 圓角邊框的繪製

到目前為止：IE、Safari、Firefox、Opera、Chorme瀏覽器都支援這種繪製圓角邊框的樣式。

border-radius屬性

在CSS3中，使用該屬性指定好圓角的半徑就可以繪製圓角邊框了。

div{   border：soild 5px blue；    border-radius：20px；}

（1）指定兩個半徑

在瀏覽器中，將第一個半徑作為邊框左上方與右下角圓半徑來繪製，第二個半徑作為邊框右上方與左下角的圓半徑來繪製

border-radius：40px 20px；

（2）不顯示邊框的時候

在CSS3中，如果使用了border-radius屬性但是把邊框設定為不顯示的時候，瀏覽器將把背景的4個角繪製為圓角

div｛border：none;border-radius：20px;｝

（3）修改邊框種類的時候

使用border-radius屬性後，不管邊框是什麼種類，都會將邊框沿著圓角曲線進行繪製。

div{border:dashed 5px blue;border-radius:20px;}

（4）繪製四個角不同半徑的圓角邊框

border-top-left-radius屬性：指定左上方半徑

border-top-right-radius屬性：指定右上方半徑

border-bottom-right-radius屬性：指定右下角半徑

border-bottom-left-radius屬性：指定左下角半徑

div｛border:dashed 5px blue;border-top-left-radius：10px;//指定左上方半徑border-top-right-radius：20px;//指定右上方半徑border-bottom-right-radius：30px;//指定右下角半徑border-bottom-left-radius：40px;//指定左下角半徑｝

9 使用映像邊框

border-image屬性

CSS3中增加了一個border-image屬性，可以讓元素的長度或寬度處於隨時變化狀態的邊框統一使用一個影像檔進行繪製。。使用border-image屬性，會讓瀏覽器在顯示映像邊框時，自動將所使用到的映像分割為9部分進行處理，這樣就不需要頁面製作者另外進行人工處理了。另外，頁面中也不需要因此而使用較多的元素。

（1）瀏覽器支援

到目前為止：IE、Safari、Firefox、Opera、Chorme瀏覽器都支援border-image屬性的使用。

（2）使用方法

border-image：url（影像檔的路徑） A B C D（該屬性中至少必須指定5個參數）

A、B、C、 D：表示當瀏覽器自動把邊框所使用到的映像進行分割時的上邊距、右邊距、下邊距以及左邊距。

div{border:solid 5px;border-image:url(borderimage.png) 18 18 18 18;width:300px;}

（3）使用border-image屬性來指定邊框寬度

CSS3中，除了可以使用border屬性或border-width屬性來指定邊框的寬度外，還可以使用border-image屬性來指定邊框寬度。

border-image：url（影像檔的路徑） A B C D/border-width

div{border:solid;border-image:url(borderimage.png) 18 18 18 18/10px;（指定為相同寬度）//border-image:url(borderimage.png) 10/5px 10px 15px 20px;（四條邊的邊框指定為不同的寬度）width:300px;}

注意：在CSS3中，如果4個參數完全相同，可以唯寫一個參數，將其他三個參數省略。

（4）指定4條邊中映像的顯示方式

可以在border-image屬性中指定元素4條邊中的映像是以展開的方式進行顯示，還是以平鋪的方式進行顯示，

border-image：url（影像檔的路徑） A B C D/border-width topbottom leftright

topbottom：表示元素的上下兩條邊中映像的顯示方式

leftright：表示元素的左右兩條邊中映像的顯示方式

顯示方式的值：

repeat：映像將以平鋪的方式進行顯示

stretch：映像將以展開的方式進行顯示

round

div{border-image:url(borderimage.png) 10/5px repeat strerch;width:300px;height:200px;}

（5）使用背景映像

在使用border-image屬性的時候，仍然可以正常使用背景圖片，但是為了不讓邊框映像擋住背景映像，需要使用中間為透明的邊框映像，否則背景映像就有可能被邊框映像的中央擋住部分或全體。

div{background-image:url(bk.png);background-repeat:no-repeat;border-image:url("borderimage.png") 20 20 20 20 /5px;background-origin:border;border-radius:18px;width:711px;height:404px;}