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