CSS3邊界圖片
隨著CSS3 border-image屬性，你可以設置圖像用作元素周圍的邊框。
瀏覽器支持
在表中的數字規定，完全支持該屬性的第一個瀏覽器版本。
其次通過數字-webkit-, -moz- ，或-o-指定用一個前綴工作的第一個版本。
| 屬性 | |||||
|---|---|---|---|---|---|
| border-image | 16.0 4.0 -webkit- |
11.0 | 15.0 3.5 -moz- |
6.0 3.1 -webkit- |
15.0 11.0 -o- |
CSS3 border-image屬性
CSS3的border-image屬性允許您指定要用來代替元素周圍正常邊框的圖像。
該物業有三個部分：
- 該圖像的邊框
- 凡切片圖像
- 限定的中間部分是否應該重複或拉伸
我們將使用下面的圖像（稱為“/css/border.png”）：
在border-image屬性採用圖像並將其薄片，放入九個部分，就像一個井字棋板。 然後，它會將角落的角落，中間部分被重複或您指定的捉襟見肘。
注意：對於border-image工作，元素也需要border屬性集！
這裡，反复進行圖像的中間部分，以創建邊界：
一個圖片作為邊框！
下面是代碼：
例
#borderimg
{
border: 10px solid transparent;
padding: 15px;
-webkit-border-image: url(border.png)
30 round; /* Safari 3.1-5 */
-o-border-image: url(border.png)
30 round; /* Opera 11-12.1 */
border-image: url(border.png)
30 round;
}
試一試» 這裡，圖像的中間段被拉伸以創建邊界：
一個圖片作為邊框！
下面是代碼：
例
#borderimg
{
border: 10px solid transparent;
padding: 15px;
-webkit-border-image: url(border.png)
30 stretch; /* Safari 3.1-5 */
-o-border-image: url(border.png)
30 stretch; /* Opera 11-12.1 */
border-image: url(border.png)
30 stretch;
}
試一試»  | 提示： border-image屬性實際上是A速記屬性border-image-source ， border-image-slice ， border-image-width ， border-image-outset和border-image-repeat屬性。 |
|---|
CSS3邊框圖像 - 不同的價值觀片
不同切片值完全改變了邊框的外觀：
實施例1：
border-image: url(border.png) 50圓;
實施例2：
border-image: url(border.png) 20％的輪;
實施例3：
border-image: url(border.png) 30％的輪;
下面是代碼：
例
#borderimg1 {
border: 10px solid transparent;
padding: 15px;
-webkit-border-image: url(border.png)
50 round; /* Safari 3.1-5 */
-o-border-image: url(border.png)
50 round; /* Opera 11-12.1 */
border-image: url(border.png)
50 round;
}
#borderimg2 {
border: 10px solid transparent;
padding: 15px;
-webkit-border-image: url(border.png) 20% round; /* Safari 3.1-5 */
-o-border-image: url(border.png) 20% round; /* Opera 11-12.1 */
border-image: url(border.png) 20% round;
}
#borderimg3 {
border: 10px solid transparent;
padding: 15px;
-webkit-border-image: url(border.png)
30% round; /* Safari 3.1-5 */
-o-border-image: url(border.png)
30% round; /* Opera 11-12.1 */
border-image: url(border.png)
30% round;
} 試一試» 自測練習用！
CSS3邊框屬性
| 屬性 | 描述 |
|---|---|
| border-image | 簡寫屬性設置所有border-image-*性質 |
| border-image-source | 指定要用作邊界的路徑圖像 |
| border-image-slice | 指定如何切片圖像邊界 |
| border-image-width | 指定邊界圖像的寬度 |
| border-image-outset | 指定由該邊界圖像區域延伸超出邊界框的量 |
| border-image-repeat | 指定邊界圖像是否應當被重複，圓形或拉伸 |