# 第 23 章 CSS3 邊框圖片效果
學習要點:
1.屬性初探
2.屬性解釋
3.簡寫和版本
主講教師:李炎恢
本章主要探討 HTML5?中 CSS3?中邊框圖片背景的效果,通過這個新屬性讓邊框更加的豐富多彩。
**一.屬性解釋**
CSS3 提供了一個新的屬性集合,用這幾個屬性可以嵌入圖片形式的邊框。這樣,邊框就可以自定義了。
1.border-image-source ? ? ?//引入背景圖片地址
2.border-image-slice ? ? ? ? //切割引入背景圖片
3.border-image-width ? ? ? //邊框圖片的寬度
4.border-image-repeat ? ? //邊框背景圖片的排列方式
5.border-image-outset ? ? //邊框背景向外擴張
6.border-image ? ? ? ? ? ? ? //上面五個屬性的簡寫方式
**二.屬性解釋**?
要實現邊框背景,我們對圖片也有一定的要求,否則效果不能完全體現出來。圖片可以通過九宮格的切分來了解它。我們使用 W3C?官網上教學的圖片來講解一下。

如上圖所示,九宮格并不一定要求每一個格子大小都相同。當然,如果相同的話,制作邊框背景就相對容易一點。比如如下這張圖片:

首先,用 Photoshop?軟件分析一下這個標準九宮格的總體大小和每個格子的大小。最終得出圖片總大小為 81px?正方形,四個角的大小為 27px?的正方形,其余五個角也是 27px。
那么,第一步:先創建一個盒子區域,大小為 400x400?的矩形。然后設置引入邊框圖像。
//引入邊框圖像
```
border-image-source: url(border.png);
```
單單只有這句話,webkit?引擎下的瀏覽器會在盒子區塊的四個角看到一丁點圖像的影子。而其他瀏覽器什么都看不到。這是由于沒有設置邊框背景圖像的寬度導致的。
//設置邊框圖像寬度,上右下左,可以設置四個值
```
border-image-width: 81px;
```
這里設置的是邊框圖像的寬度,而不是邊框寬度。當你設置邊框寬度,你會發現,文本會偏移。而邊框圖像的寬度不會擠壓文本。
//設置邊框的寬度
```
border-width: 20px;
```
以上設置完畢后,支持邊框背景圖片的瀏覽器會在四個角落鋪上這張圖片的完整形式。這個時候需要通過引入切割屬性來配置背景圖片的顯示方式。
//首先,邊框圖像寬度設置為?27px 和一個單格寬高一致?
```
border-image-width: 27px;
```
//設置切割屬性的大小?
```
border-image-slice: 27;
```
這里的 27?不需要設置 px?像素,因為它默認就是像素。設置 27?之后,我們會發現邊框的四個角正好是橘紅色的四個角。那么你可以逐步放大或逐步放下這個值,來體驗一下它的變化。
//從?27 逐步放大到?81,四個角都慢慢縮小,各自顯示一個完整的圖像
```
border-image-slice: 81;
```
//從?27 逐步縮小到?0,發現四個角都慢慢變大,配合?fill 整體顯示一個完整圖像
```
border-image-slice: 0 fill;
```
上面只是單獨設置了一個像素表示四個邊切割的大小,你也可以設置百分比、浮點值或者分別設置四個變的大小。
//33.5%差不多?27
```
border-image-slice: 33.5%;
```
//上下設置?27,左右設置?0
```
border-image-slice: 27 0;
```
如果想讓邊框背景向外擴張,那么可以進行擴張設置。
//向外擴張?20px,也可以是浮點值,比如?2.2
```
border-image-outset: 20px;
```
四個角設定好之后,我們要設定四個變的顯示排列方式。使用 border-image-repeat?屬性,有四個值提供使用,分別如下表:
| **屬性** | **說明** |
| --- | --- |
| stretch? | 指定用拉伸方式填充邊框背景圖。默認值。 |
| repeat | 指定用平鋪方式來填充邊框背景圖。當圖片碰到邊界時,如果超過則被截斷。 |
| round | 指定用平鋪方式來填充邊框背景圖。圖片會根據邊框的尺寸動態調整圖片的大小,直至正好可以鋪滿整個邊框。 |
| space | 指定用平鋪方式來填充邊框背景圖。圖片會根據邊框的尺寸動態調整圖片的之間的間距,直至正好可以鋪滿整個邊框。 |
//拉伸方式填充,當然,通過上右下左設置四個邊均可
```
border-image-repeat: stretch;
```
//平鋪填充,超過則被截斷
```
border-image-repeat: repeat;
```
//平鋪填充,動態調整圖片大小直至鋪滿
```
border-image-repeat: round;
```
//平鋪填充,動態調整圖片的間距直至鋪滿?
```
border-image-repeat: space;
```
//另一個按鈕的小例子?
```
div { width: 400px; height: 40px; border-image-source: url(button.png); border-image-width: 10px; border-image-slice: 10 fill; border-image-repeat: stretch;
}
```
**三.簡寫和版本**
//border-image 簡寫格式很簡單,具體如下:
```
border-image:<' border-image-source '> || <' border-image-slice '> [ /<' border-image-width '> | / <' border-image-width '>? / <' border-image-outset '> ]? || <' border-image-repeat '>?
```
//以上是手冊上摘錄的,轉換成實際格式如下:?
```
border-image: url(border.png) 27/27px round;?
```
對于支持的瀏覽器及版本如下表:
| | Opera | Firefox | Chrome | Safari | IE |
| --- | --- |
| 部分支持需帶前綴 | 11.5~12.1 | 3.5 ~ 14 | 4 ~ 14 | 3.1 ~ 5.1 | 無 |
| 支持需帶前綴 | 無 | 無 | 無 | 無 | 無 |
| 支持不帶前綴 | 15+ | 15+ | 15+ | 6+ | 11.0+ |
//兼容加上前綴
```
-webkit-border-image: url(border.png) 27/27px round;
-moz-border-image: url(border.png) 27/27px round;
-o-border-image: url(border.png) 27/27px round;
border-image: url(border.png) 27/27px round;
```
- 介紹
- HTML/CSS 教程
- 第 1 章 HTML5 概述
- 第 2 章 基本格式
- 第 3 章 文本元素
- 第 4 章 超鏈接和路徑
- 第 5 章 分組元素
- 第 6 章 表格元素
- 第 7 章 文檔元素
- 第 8 章 嵌入元素
- 第 9 章 音頻和視頻
- 第 10 章 表單元素[上]
- 第 10 章 表單元素[中]
- 第 10 章 表單元素[下]
- 第 11 章 全局屬性和其他
- 第 12 章 CSS 入門
- 第 13 章 CSS 選擇器[上]
- 第 14 章 CSS 顏色與度量單位
- 第 15 章 CSS 文本樣式[上]
- 第 15 章 CSS 文本樣式[下]
- 第 16 章 CSS 盒模型[上]
- 第 16 章 CSS 盒模型[下]
- 第 17 章 CSS 邊框與背景[上]
- 第 17 章 CSS 邊框與背景[下]
- 第 18 章 CSS 表格與列表
- 第 19 章 CSS 其他樣式
- 第 20 章 CSS3 前綴和 rem
- 第 21 章 CSS3 文本效果
- 第 21 章 CSS3 文本效果
- 第 23 章 CSS3 邊框圖片效果
- 第 24 章 CSS3 變形效果[下]
- 第 25 章 CSS3 過渡效果
- 第 26 章 CSS3 動畫效果
- 第 27 章 CSS 傳統布局[上]
- 第 27 章 CSS 傳統布局[下]
- 第 28 章 CSS3 多列布局
- 第 29 章 CSS3 彈性伸縮布局[上]
- 第 29 章 CSS3 彈性伸縮布局[中]
- 第 29 章 CSS3 彈性伸縮布局[下]
- 第 30 章 使用 Emmet 插件
- Bootstrap 教程
- 第 1 章 Bootstrap 介紹
- 第 2 章 排版樣式
- 第 3 章 表格和按鈕
- 第 4 章 表單和圖片
- 第 5 章 柵格系統
- 第 6 章 輔組類和響應式工具
- 第 7 章 圖標菜單按鈕組件
- 第 8 章 輸入框和導航組件
- 第 9 章 路徑分頁標簽和徽章組件
- 第 10 章 巨幕頁頭縮略圖和警告框組件
- 第 11 章 進度條媒體對象和 Well 組件
- 第 12 章 列表組面板和嵌入組件
- 第 13 章 模態框插件
- 第 14 章 下拉菜單和滾動監聽插件
- 第 15 章 標簽頁和工具提示插件
- 第 16 章 彈出框和警告框插件
- 第 17 章 按鈕和折疊插件
- 第 18 章 輪播插件
- 第 19 章 附加導航插件
- 第 20 章 項目實戰--響應式導航[1]
- 第 20 章 項目實戰--響應式輪播圖[2]
- 第 20 章 項目實戰--首頁內容介紹[上][3]
- 第 20 章 項目實戰--首頁內容介紹[下][4]
- 第 20 章 項目實戰--資訊內容[5,6]
- 第 20 章 項目實戰--案例和關于[7]
- javaScript 教程
- javascript快速入門1--JavaScript前世今生,HelloWorld與開發環境
- javascript快速入門2--變量,小學生數學與簡單的交互
- javascript快速入門3--分支判斷與循環
- javascript快速入門4--函數與內置對象
- javascript快速入門5--數組與對象
- javascript快速入門6--Script標簽與訪問HTML頁面
- javascript快速入門7--ECMAScript語法基礎
- javascript快速入門8--值,類型與類型轉換
- javascript快速入門9--引用類型
- javascript快速入門10--運算符,語句
- javascript快速入門11--正則表達式
- javascript快速入門12--函數式與面向對象
- javascript快速入門13--BOM——瀏覽器對象模型(Browser Object Model)
- javascript快速入門14--DOM基礎
- javascript快速入門15--節點
- javascript快速入門15--表單
- javascript快速入門16--表格
- javascript快速入門17--事件
- javascript快速入門18--樣式
- javascript快速入門19--定位
- javascript快速入門20--Cookie
- javascript快速入門21--DOM總結
- javascript快速入門22--Ajax簡介
- javascript快速入門23--XHR—XMLHttpRequest對象
- javascript快速入門24--XML基礎
- javascript快速入門25--瀏覽器中的XML
- javascript快速入門26--XPath
- javascript快速入門27--XSLT基礎
- PHP 教程
- 第一章 如何加載運行已發布的PHP項目
- 第二章 PHP基礎
- 第三章 操作符與控制結構
- 第四章 數學運算
- 第五章 數組
- 第六章 目錄與文件
- 第七章 自定義函數
- 第八章 字符串處理
- 第九章 正則表達式
- 第十章 日期與時間
- 第十一章 表單與驗證
- 第十二章 會話控制
- 第十三章 上傳文件
- 第十四章 處理圖像
- 第十五章 MySQL 數據庫
- 第十六章 PHP 操作MySQL
- 第十七章 面向對象基礎
- 第十八章 面向對象的特性
- 第十九章 面向對象的工具