第23章 CSS邊框圖片效果

標籤：

本章學習日後開發使用參考一下內容

 

https://www.qianduan.net/css3border-image-bian-kuang-tu-xiang-xiang-jie/

或W3C 或者百度

 

未排版的PDF轉WORD（不想排版了）

第 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
11.5~12.1
無
Firefox
Chrome
Safari
IE
無
部分支援需帶首碼
支援需帶首碼
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;

 

第23章 CSS邊框圖片效果