CSS3 邊框圖片

標籤：lines   java   作用   ddc   rip   copy   out   自動   固定   

CSS3 邊框圖片

通過 CSS3 的 border-image 屬性，可以使用圖片來建立邊框：border-image是用來代替border-style的，即border的大小取決於。
而且有border-image的側邊就沒有border-shadow的什麼事。哈哈，他倆衝突。注意，border-image不佔用頁面位置（他是脫離文檔流的！！！）。

- 實現原理
- 參數解析
- - 圖片切片border-image-slice
- - 邊框圖片寬度border-image-width
- - 邊框圖片外凸border-image-outset
- - 邊框圖片重複border-image-repeat

原理

首先，會將靶心圖表片進行切分成9份，
圖1
，然後將中間的那一份（序號為9）替換成目標元素中的內容。

參數解析

border-image-sourse

初始值是none，盒子邊框就會應用 border-style 的值；
假如你想要設定一個外部連結地址的圖片進來:

.boder {       border:54px solid #000;       border-image-source:url("../../upload/image/picture.png");//引入圖片作為border       width: 200px;       height: 200px;       }

圖片切片border-image-slice

eg：border-image-slice：10 20 30 40；就則1號線為10,2號線為20,3號線為30，四號線為40.
就是說border-image-sourse引入的圖片要進行切割才能放入作為border。設定border-image-slice：10 20 30 40；給圖片按照圖片所示來上4刀，就將圖片切割成9塊了。（圖1中地區1由切割線1,4決定，地區2由切割線1,2決定，地區3由切割線2,3決定，地區4由切割線3,4決定，地區5由切割線1,2，4決定，地區6由切割線1,2,3決定，地區7由切割線2,3,4決定,地區8由切割線1,3,4決定,地區9由切割線1,2,3,4決定）
這是本寶寶用盡洪荒之力嘗試出來滴！

邊框圖片寬度border-image-width

作用等同於元素本身的盒子的邊框寬度border-width。假如指定了border-image-width，則border-width無效；假如不指定，那麼圖片邊框寬度就由border-width來固定。

也就是由他來控制圍繞元素的圖片的大小。
在這裡需要申明一點。border-image-slice是用來控制切割原圖時對原圖的處理，大小是相對與原圖而言的。而border-image-width是控制原圖切割完成之後放置到元素四周時，圖片的縮放。
本來切割完成之後人家圖片是張這樣的：
然後，在設定了border-image-width之後就被展開了。
也就是說，我們現在為止（只設定slice與width）所看到的圖片大小，先由切割線1,2,3,4切割出來，再由border-image-slice展開。

邊框圖片外凸border-image-outset

的作用就讓邊框背景延伸到盒子外。border-image-width是控制盒子邊框的大小。看圖：

  .boder {      border:solid #000;      border-image-source:url("../../upload/image/picture.png");      border-image-width:50px;      border-image-slice:27 27 27 27;      border-image-outset: 20px;// 邊框圖片outset設定為20px，那麼背景圖將會從盒子最外邊界向外上右下左各延伸20px。      width: 100px;      height: 100px;      }

邊框圖片重複border-image-repeat

作用就讓邊框背景是否重複，預設值為stretch，是展開的意思，4個角4個地區分別做水平和垂直方向的展開，來填補邊框的間隙；repeat是就是讓4個角4個地區做完水平和垂直方向的複製映像，做CTRL+V運動，把邊框之間的空隙填滿；而round[環繞]是把4個角和4個地區分成均等地區，然後用背景圖片切好能鋪滿整個邊框空隙，不能多也不能少，正好合適。（這段是copy大神的話，但具體出處真的不記得了，sorry！）

stretch

為了當大家看清楚，接下來的圖片我都是放兩個相同的，只不過有一張使用陰影的形式將border-image的範圍標註了一下。
stretch就是展開的意思，4個角4個地區分別做水平和垂直方向的展開，來填補邊框的間隙；只不過四個角1,2,3,4的高度與寬度同時做同比例縮放，而四個地區5,6,7,8都各自做單方向的展開。

 .boder {      border:solid #000;      border-image-source:url("../../upload/image/picture.png");      border-image-width:50px;      border-image-slice:27 27 27 27;      border-image-repeat:stretch;      width: 100px;      height: 100px;      }

repeat

repeat是就是讓4個角4個地區做完水平和垂直方向的複製映像，做CTRL+V運動，把邊框之間的空隙填滿；

.boder {    border:27px solid #000;    border-image-source:url("../../upload/image/picture.png");    border-image-slice:27;    border-image-repeat: repeat;    width: 100px;    height: 100px;      }

！

border四個角的大小為27*27（由border-width：27px）,而圖片四個角的大小也為27*27（由 border-image-slice:27;）。所以我們看到四個角的圖片很正常。但上下左右周四條邊由於原本圖片四個地區大小為27*27，而border-width的四個地區為27*（100-27*2）（元素 width: 100px;height: 100px;）所以，四個地區做repeat處理。

round

而round[環繞]是把4個角和4個地區分成均等地區，然後用背景圖片切好能鋪滿整個邊框空隙，不能多也不能少，正好合適。

.boder {    border:27px solid #000;    border-image-source:url("../../upload/image/picture.png");    border-image-slice:27;    border-image-repeat: repeat;    width: 100px;    height: 100px;      }

round 會自動調整尺寸，將圖片的大小在slice操作基礎上做伸縮，完整顯示邊框圖片。
repeat 單純平鋪多餘部分，不會將圖片的大小在slice操作基礎上做伸縮，圖片會被“裁切”而不能完整顯示。

CSS3 邊框圖片