站長資訊網(wǎng)
增加邊框的方法有：1、border屬性，圍繞元素內(nèi)容和內(nèi)邊距的一條或多條線，該屬性允許你規(guī)定元素邊框的樣式、寬度和顏色；2、border-image屬性，border-image屬性用于設(shè)置圖片邊框。
本教程操作環(huán)境：windows7系統(tǒng)、CSS3&&HTML5版、Dell G3電腦。
CSS border 屬性
元素的邊框 (border) 是圍繞元素內(nèi)容和內(nèi)邊距的一條或多條線。
每個(gè)邊框有 3 個(gè)方面：寬度、樣式，以及顏色。
CSS border 屬性允許你規(guī)定元素邊框的樣式、寬度和顏色。
border 簡寫屬性在一個(gè)聲明設(shè)置所有的邊框?qū)傩浴?/p>
可以按順序設(shè)置如下屬性：
border-width：規(guī)定邊框的寬度。
border-style：規(guī)定邊框的樣式。
border-color：規(guī)定邊框的顏色。
示例：
<html> <head> <style type="text/css"> div{border:1px solid #000} </style> </head> <body> <div>div添加邊框</div> </body> </html>
效果
CSS border-image屬性
border-image屬性用于設(shè)置圖片邊框，它是一個(gè)簡寫屬性，設(shè)置所有 border-image-* 屬性。如果省略值，會設(shè)置其默認(rèn)值。
語法：
border-image: source slice width outset repeat|initial|inherit;
屬性值：
-
border-image-source：用于指定要用于繪制邊框的圖像的位置
-
border-image-slice：圖像邊界向內(nèi)偏移
-
border-image-width：圖像邊界的寬度
-
border-image-outset：用于指定在邊框外部繪制 border-image-area 的量
-
border-image-repeat：用于設(shè)置圖像邊界是否應(yīng)重復(fù)（repeat）、拉伸（stretch）或鋪滿（round）。
border-image的用處
沒用border-image之前，覺得css的屬性基本夠用，border-image完全是將簡單的工作復(fù)雜化，當(dāng)學(xué)習(xí)完該屬性以后，發(fā)現(xiàn)該屬性的運(yùn)用能夠大大節(jié)省編碼時(shí)間和效率，總結(jié)一下，大致適用于以下兩個(gè)場景：
元素邊框不規(guī)則的情況。這時(shí)候，就需要用設(shè)計(jì)圖作為邊框背景，border-image與background-image相比，好處是更具靈活性，可以用代碼控制邊框背景的拉伸和重復(fù)，因而能夠創(chuàng)造出
