您好,登錄后才能下訂單哦!
這篇文章將為大家詳細(xì)講解有關(guān)如何在css中設(shè)置圖片邊框,文章內(nèi)容質(zhì)量較高,因此小編分享給大家做個(gè)參考,希望大家閱讀完這篇文章后對(duì)相關(guān)知識(shí)有一定的了解。
1.行內(nèi)樣式,最直接最簡單的一種,直接對(duì)HTML標(biāo)簽使用style=""。2.內(nèi)嵌樣式,就是將CSS代碼寫在之間,并且用
進(jìn)行聲明。3.外部樣式,其中鏈接樣式是使用頻率最高,最實(shí)用的樣式,只需要在之間加上
就可以了。其次就是導(dǎo)入樣式,導(dǎo)入樣式和鏈接樣式比較相似,采用@import樣式導(dǎo)入CSS樣式表,不建議使用。在CSS3中,可以使用border-image屬性為邊框添加背景圖片。現(xiàn)在所有主流瀏覽器最新版本都支持border-image屬性。
語法:
說明:
border-image屬性需要定義3個(gè)方面的內(nèi)容。
(1)圖片路徑。
(2)切割寬度:四條邊的切割寬度,依次為上邊、右邊、下邊、左邊(順時(shí)針)。
(3)平鋪方式:有3種取值,分別為repeat、round和stretch。
在本節(jié)所有例子中,我們都是使用圖所示的這張90px×90px的圖片作為邊框的背景圖片。
代碼示例:
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> div { width:210px; height:150px; border:30px solid gray; border-image:url(img/border.png) 30 repeat; } </style> </head> <body> <div></div> </body> </html>
瀏覽器預(yù)覽效果如下圖所示。
分析:
從預(yù)覽效果我們可以知道,位于4個(gè)角的數(shù)字1、3、7、9還是乖乖地位于4個(gè)角。然后4條邊框的2、4、6、8會(huì)不斷地平鋪。
對(duì)于border-image屬性,我們總結(jié)如下:
(1)在制作邊框背景圖片時(shí),應(yīng)該制作4條邊,中間部分需要挖空。
(2)邊框背景圖片每條邊的寬度跟對(duì)應(yīng)的邊框?qū)挾龋碽order-width)應(yīng)該相同。
舉例:平鋪方式
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> div { width:170px; height:110px; line-height:110px; text-align: center; border:30px solid gray; margin-top:20px; } /*第1個(gè)div平鋪方式為:repeat*/ #div1{border-image:url(img/border.png) 30 repeat;} /*第2個(gè)div平鋪方式為:round*/ #div2{border-image:url(img/border.png) 30 round;} /*第3個(gè)div平鋪方式為:stretch*/ #div3{border-image:url(img/border.png) 30 stretch;} </style> </head> <body> <div id="div1">repeat</div> <div id="div2">round</div> <div id="div3">stretch</div> </body> </html>
瀏覽器預(yù)覽效果如下圖所示:
分析:
border-image屬性的平鋪方式有3種:repeat、round、stretch。
(1)取值為repeat時(shí),表示4條邊的小方塊會(huì)不斷重復(fù),超出元素部分將會(huì)被剪切掉。
(2)取值為round時(shí),表示4條邊的小方塊會(huì)鋪滿。為了鋪滿,邊框圖片會(huì)壓縮或拉伸。
(3)取值為stretch時(shí),表示4條邊的小方塊會(huì)拉伸,邊長有多長就拉多長。
border-image的派生子屬性
border-image屬性可以分開,分別為4條邊設(shè)置相應(yīng)的背景圖片,這4條邊的屬性如下表所示。
子屬性 | 說明 |
---|---|
border-top-image | 定義上邊框背景圖片 |
border-bottom-image | 定義下邊框背景圖片 |
border-left-image | 定義左邊框背景圖片 |
border-right-image | 定義右邊框背景圖片 |
關(guān)于如何在css中設(shè)置圖片邊框就分享到這里了,希望以上內(nèi)容可以對(duì)大家有一定的幫助,可以學(xué)到更多知識(shí)。如果覺得文章不錯(cuò),可以把它分享出去讓更多的人看到。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請(qǐng)聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。