css3中背景屬性與邊框相關(guān)的屬性是什么

這篇文章將為大家詳細(xì)講解有關(guān)css3中背景屬性與邊框相關(guān)的屬性是什么，小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。

　　1與背景相關(guān)的新增屬性

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

　　background-origin：指定繪制背景圖像時(shí)的起點(diǎn)。

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

　　background-break：指定內(nèi)聯(lián)元素的背景圖像進(jìn)行平鋪時(shí)的循環(huán)方式。

　　注意：

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

　　Safari、GoogleChorme、Opera：支持除了background-break之外的其他三個(gè)屬性，需在屬性前加“”“-webkit-”文字。

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

　?。?）背景的顯示范圍

　　CSS2：背景的顯示范圍是指內(nèi)部補(bǔ)白之內(nèi)的范圍，不包括邊框。

　　CSS2.1乃至CSS3：背景的顯示范圍是指包括邊框在內(nèi)的范圍。

　?。?）屬性值

　　border：背景范圍包括邊框區(qū)域。

　　padding：背景范圍不包括邊框區(qū)域。

　　div.div1{

　　-moz-background-clip：border;

　　-webkit-background-clip：border;

　　}

　　div.div2{

　　-moz-background-clip：padding;

　　-webkit-background-clip：padding;

　　}

　　3指定繪制背景圖像時(shí)的起點(diǎn)-background-origin屬性

　　（1）在繪制背景圖像時(shí)，默認(rèn)是從內(nèi)容補(bǔ)白區(qū)域的左上角開始繪制的。

　?。?）值

　　border：從邊框的左上角開始繪制

　　padding：從內(nèi)容補(bǔ)白區(qū)域的左上角開始繪制

　　content：從內(nèi)容的左上角開始繪制

　?。?）瀏覽器不同

　　Firefox：”-moz-background-origin”；

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

　?。?）雖然將background-clip屬性指定為padding的時(shí)候，邊框點(diǎn)劃線中點(diǎn)與點(diǎn)之間的圖像不會(huì)顯示，但是仍然可以通過將background-origin屬性指定為border的方法來指定從邊框的左上角開始繪制。

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

　　（1）使用方法

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

　?。?）瀏覽器支持：

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

　?。?）如果要維持圖像的縱橫比例，可以在設(shè)定圖像寬度與高度時(shí)，將另一個(gè)參數(shù)設(shè)為auto

　　（4）只指定一個(gè)參數(shù)

　　瀏覽器中將該值作為寬度值，auto作為高度值進(jìn)行處理。

　?。?）使用百分比的值作為參數(shù)

　　瀏覽器中將指定的百分比視為圖像尺寸除以整個(gè)邊框區(qū)域的尺寸后得出的百分比來處理

　　（6）contain關(guān)鍵字作為參數(shù)

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

　　（7）cover關(guān)鍵字作為參數(shù)

　　這會(huì)使原始圖像在維持縱橫比的前提下將背景圖像自動(dòng)縮放到填滿元素內(nèi)部，如果元素的長寬比例與原始圖像的長寬比例不一致，那么多余部分將被剪去。

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

　　（1）space

　　在水平方向或垂直方向平鋪背景圖像時(shí)并不裁減掉圖像超出背景的部分，也不會(huì)調(diào)整背景圖像尺寸，而是自動(dòng)調(diào)整圖像與圖像之間的間距。

　?。?）round

　　在水平方向或垂直方向平鋪背景圖像時(shí)并不裁減掉圖像超出背景的部分，而是會(huì)自動(dòng)調(diào)整背景圖像的尺寸。

　?。?）瀏覽器支持

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

　　div{

　　background-repeat：space；//round

　　}

　　6在一個(gè)元素中顯示多個(gè)背景圖像

　　在CSS3中可以在一個(gè)元素中顯示多個(gè)背景圖片，還可以將多個(gè)背景圖片進(jìn)行重疊顯示，從而使得調(diào)整背景圖像中所使用的素材變得更加容易。

　　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%，centercenter，top；

　　}

　?。?）使用background-image屬性來指定圖像文件的時(shí)候，指定的時(shí)候是按在瀏覽器中顯示時(shí)圖像疊放的順序從上往下指定的，第一個(gè)圖像文件是放在最上面的，最后指定的文件是放在最下面的。

　　（2）通過多個(gè)background-repeat屬性與background-position屬性的指定，可以單獨(dú)指定背景圖像中某個(gè)圖像文件的平鋪方式與放置位置。

　?。?）允許被多重指定并配合多個(gè)圖像文件一起利用的屬性如下：

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

　　7使用漸變色背景

　　CSS3中，支持對(duì)于元素指定漸變色背景。所謂漸變是指從一種顏色慢慢過渡到另一種顏色。漸變分為線性漸變與放射性漸變。

　　繪制線性漸變

　　background：linear-gradient（tobottom，orange，black）

　　使用linear-gradient函數(shù)實(shí)現(xiàn)線性漸變，函數(shù)中使用三個(gè)參數(shù)。

　?。?）第一個(gè)參數(shù)值：

　　tobottom：指定從上往下的漸變，默認(rèn)漸變起點(diǎn)為元素頂端，漸變重點(diǎn)為元素底端。

　　tobottomright：指定從左上往右下的漸變，默認(rèn)漸變起點(diǎn)為元素左上角，漸變終點(diǎn)為元素右下角。

　　toright：指定從左往右的漸變，默認(rèn)漸變起點(diǎn)為元素左邊，漸變重點(diǎn)為元素右邊。

　　toupright：指定從左下往右上的漸變，默認(rèn)漸變起點(diǎn)為元素左下角，漸變終點(diǎn)為元素右上角。

　　toup：指定從下往上的漸變，默認(rèn)漸變起點(diǎn)為元素底端，漸變終點(diǎn)為元素頂端。

　　toupleft：指定從右下往左上的漸變，默認(rèn)漸變起點(diǎn)為元素右下角，漸變終點(diǎn)為元素左上角。

　　toleft：指定從右往左的漸變，默認(rèn)漸變起點(diǎn)為元素右邊，漸變終點(diǎn)為原左邊。

　　tobottomleft：指定從右上往左下的漸變，默認(rèn)漸變起點(diǎn)為元素右上角，漸變終點(diǎn)為元素左下角。

　　可指定一個(gè)角度，用于指定漸變線的旋轉(zhuǎn)角度

　　（2）第二個(gè)參數(shù)值代表漸變的起點(diǎn)色，第三個(gè)參數(shù)代表漸變的終點(diǎn)色。

　　div{

　　width：300px；

　　height：300px；

　　background：linear-gradient（tobottom，orange，black）//從頂端到底端、從桔色到黑色的線性漸變

　　}

　?。?）將第一個(gè)參數(shù)指定為一個(gè)角度，其作用為修改漸變線的角度

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

　　如果角度為0，則漸變線的方向?yàn)閺南峦?，?dāng)角度增加時(shí)漸變線順時(shí)針方向旋轉(zhuǎn)。

　?。?）可以在起點(diǎn)色或終點(diǎn)色后邊指定離漸變色起點(diǎn)或漸變色終點(diǎn)的偏離位置（不指定時(shí)默認(rèn)值分別為0%及100%）

　　background：linear-gradient（tobottom，orange20%，black70%）；

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

　?。?）可以添加多個(gè)漸變的中間點(diǎn)

　　background：linear-gradient（tobottom，orange0%，red25%，yellow50%，green75%，black100%）；

　　繪制放射性漸變

　　background：radial-gradient（orange，black）；

　　使用radial-gradient函數(shù)實(shí)現(xiàn)放射性漸變，函數(shù)使用兩個(gè)參數(shù)，分別為漸變起點(diǎn)色與漸變終點(diǎn)色。

　　div{

　　background：radial-gradient（orange，black）；//從中心向外擴(kuò)散，從桔色到黑色的放射性漸變；

　　}

　?。?）可以通過circle關(guān)鍵字或ellipse關(guān)鍵字指定繪制漸變呈圓形向外擴(kuò)散方式還是呈橢圓形向外擴(kuò)散方式。

　　div{

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

　　}

　?。?）可以通過at關(guān)鍵字指定漸變起點(diǎn)位置

　　background：radial-gradient（

　　at

　　lefttop，orange，black）；

　　可指定如下選項(xiàng)值：

　　centercenter：從元素中心點(diǎn)向外擴(kuò)散（默認(rèn)選項(xiàng)值）

　　lefttop：從元素左上角向外擴(kuò)散

　　centertop：從元素頂部中央向外擴(kuò)散

　　righttop：從元素右上角向外擴(kuò)散

　　rightcenter：從元素右端中央向外擴(kuò)散

　　rightbottom：從元素右下角向外擴(kuò)散

　　centerbottom：從元素底部中央向外擴(kuò)散

　　leftbottom：從元素左上角向外擴(kuò)散

　　坐標(biāo)值：例如（30,50），從指定坐標(biāo)點(diǎn)處向外擴(kuò)散

　　background：radial-gradient（circleatcentertop，orange，black）；

　　background：radial-gradient（at130px50px，orange，black）；

　　（3）指定漸變尺寸

　　closest-side：可漸變到離漸變起點(diǎn)最近的一條邊。

　　farthest-side：可漸變到離漸變起點(diǎn)最遠(yuǎn)的一條邊。

　　closest-corner：可漸變到離漸變起點(diǎn)最近的一個(gè)角。

　　farthest-corner：可漸變到離漸變起點(diǎn)最遠(yuǎn)的一個(gè)角。

　　background：radial-gradient（ellipseclosest-sideat130px50px，orange，black）；

　?。?）可通過對(duì)圓形漸變指定半徑的方法指定漸變尺寸

　　background：radial-gradient（circle95pxat130px50px，orange，black）；

　?。?）可通過對(duì)橢圓形漸變指定橫向半徑及縱向半徑的方法指定漸變尺寸

　　background：radial-gradient（ellipse

　　235px95pxat130px50px，orange，black）；

　?。?）可通過添加多個(gè)漸變色并指定偏離百分比的方法在漸變起點(diǎn)與漸變終點(diǎn)中添加多個(gè)漸變中間點(diǎn)

　　background：radial-gradient（circle130pxat130px50px，orange0%，red25%，yellow50%，green75%，black）；

　　8圓角邊框的繪制

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

　　border-radius屬性

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

　　div{

　　border：soild5pxblue；

　　border-radius：20px；

　　}

　　（1）指定兩個(gè)半徑

　　在瀏覽器中，將第一個(gè)半徑作為邊框左上角與右下角圓半徑來繪制，第二個(gè)半徑作為邊框右上角與左下角的圓半徑來繪制

　　border-radius：40px20px；

　?。?）不顯示邊框的時(shí)候

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

　　div｛

　　border：none;

　　border-radius：20px;

　?。?/p>

　　（3）修改邊框種類的時(shí)候

　　使用border-radius屬性后，不管邊框是什么種類，都會(huì)將邊框沿著圓角曲線進(jìn)行繪制。

　　div{

　　border:dashed5pxblue;

　　border-radius:20px;

　　}

　?。?）繪制四個(gè)角不同半徑的圓角邊框

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

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

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

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

　　div｛

　　border:dashed5pxblue;

　　border-top-left-radius：10px;//指定左上角半徑

　　border-top-right-radius：20px;//指定右上角半徑

　　border-bottom-right-radius：30px;//指定右下角半徑

　　border-bottom-left-radius：40px;//指定左下角半徑

　?。?/p>

　　9使用圖像邊框

　　border-image屬性

　　CSS3中增加了一個(gè)border-image屬性，可以讓元素的長度或?qū)挾忍幱陔S時(shí)變化狀態(tài)的邊框統(tǒng)一使用一個(gè)圖像文件進(jìn)行繪制。。使用border-image屬性，會(huì)讓瀏覽器在顯示圖像邊框時(shí)，自動(dòng)將所使用到的圖像分割為9部分進(jìn)行處理，這樣就不需要頁面制作者另外進(jìn)行人工處理了。另外，頁面中也不需要因此而使用較多的元素。

　?。?）瀏覽器支持

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

　?。?）使用方法

　　border-image：url（圖像文件的路徑）ABCD（該屬性中至少必須指定5個(gè)參數(shù)）

　　A、B、C、D：表示當(dāng)瀏覽器自動(dòng)把邊框所使用到的圖像進(jìn)行分割時(shí)的上邊距、右邊距、下邊距以及左邊距。

　　div{

　　border:solid5px;

　　border-image:url(borderimage.png)18181818;

　　width:300px;

　　}

　?。?）使用border-image屬性來指定邊框?qū)挾?/p>

　　CSS3中，除了可以使用border屬性或border-width屬性來指定邊框的寬度外，還可以使用border-image屬性來指定邊框?qū)挾取?/p>

　　border-image：url（圖像文件的路徑）ABCD/border-width

　　div{

　　border:solid;

　　border-image:url(borderimage.png)18181818/10px;（指定為相同寬度）

　　//border-image:url(borderimage.png)10/5px10px15px20px;（四條邊的邊框指定為不同的寬度）

　　width:300px;

　　}

　　注意：在CSS3中，如果4個(gè)參數(shù)完全相同，可以只寫一個(gè)參數(shù)，將其他三個(gè)參數(shù)省略。

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

　　可以在border-image屬性中指定元素4條邊中的圖像是以拉伸的方式進(jìn)行顯示，還是以平鋪的方式進(jìn)行顯示，

　　border-image：url（圖像文件的路徑）ABCD/border-widthtopbottomleftright

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

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

　　顯示方式的值：

　　repeat：圖像將以平鋪的方式進(jìn)行顯示

　　stretch：圖像將以拉伸的方式進(jìn)行顯示

　　round

　　div{

　　border-image:url(borderimage.png)10/5pxrepeatstrerch;

　　width:300px;

　　height:200px;

　　}

　?。?）使用背景圖像

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

　　div{

　　background-image:url(bk.png);

　　background-repeat:no-repeat;

　　border-image:url("borderimage.png")20202020/5px;

　　background-origin:border;

　　border-radius:18px;

　　width:711px;

　　height:404px;

　　}

關(guān)于“css3中背景屬性與邊框相關(guān)的屬性是什么”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，使各位可以學(xué)到更多知識(shí)，如果覺得文章不錯(cuò)，請(qǐng)把它分享出去讓更多的人看到。