大家好，我是半夏????，一個剛剛開始寫文的沙雕程序員.如果喜歡我的文章，可以關(guān)注? 點(diǎn)贊 ???? 加我微信：frontendpicker，一起學(xué)習(xí)交流前端，成為更優(yōu)秀的工程師～關(guān)注公眾號：搞前端的半夏,了解更多前端知識! 點(diǎn)我探索新世界！
創(chuàng)新互聯(lián)公司專業(yè)為企業(yè)提供康平網(wǎng)站建設(shè)、康平做網(wǎng)站、康平網(wǎng)站設(shè)計、康平網(wǎng)站制作等企業(yè)網(wǎng)站建設(shè)、網(wǎng)頁設(shè)計與制作、康平企業(yè)網(wǎng)站模板建站服務(wù)，10多年康平做網(wǎng)站經(jīng)驗(yàn)，不只是建網(wǎng)站，更提供有價值的思路和整體網(wǎng)絡(luò)服務(wù)。
原文鏈接 ==>http://sylblog.xin/archives/35
前有background-image 為背景增光增彩，后有mask-image 給背景增加可玩性，今天我們來聊聊border-image，看看他是如何發(fā)光發(fā)熱的！Go!Go!Go!
首先這個屬性是下面?zhèn)€屬性的縮寫，
border-image-source
border-image-slice
border-image-width
border-image-outset
border-image-repeat
對于本人來說，這個屬性比其他屬性來講是比較難的,所以先介紹背后的原理。
首先掏出一張大家都在用的圖片，是不是瞬間感覺很熟悉。
為什么這張圖這么受大家的歡迎呢，我覺得這張圖是一個完美的九宮格。沒錯，九宮格就是原理。
這里我們假設(shè)border-image（或者說是border-image-slice）屬性三等分，把圖片分成一個九宮格。這張圖是8181尺寸的，所以正好是每個菱形占據(jù)一個角。尺寸是2727。
同時也會把瀏覽器元素分成九塊,但是并不是平均分的，比如，左上角大小就和borderimage的左上角大小一致，但是上邊中間的大小是剩余的空間大小，這里就引出了第二個屬性，border-image-repeat會決定borderimage中間格子在元素上如何顯示，相信看到這里大家對于border-image的原理有大概的了解了。
下面我們介紹各個屬性
border-image的背景圖使用url()調(diào)用，圖片可以是相對路徑或是絕對路徑，也可以不使用圖片，即border-image:none;
這里有個點(diǎn)要注意：如果存在border-image屬性并且圖片不是none的話，border-style 會失效。
重慶分公司
重慶分公司
width: 200px;
height: 200px;
border: 10px solid #000;
padding: 20px;
border-image: url('./../juejin.png') ;
通過圖片我們會發(fā)現(xiàn)：
1. 我們給邊框設(shè)置的黑色并沒有生效。
2. border-image的寬度和border的寬度保持一致。
3. 如果不設(shè)置border的寬度，border-image也就沒有寬度，即使你設(shè)置了border-image-width:也是沒有作用的。（border-image-width下面會介紹，莫急?。?/strong>
規(guī)定圖片剪裁位置
border-image:urlurl('./../juejin.png') 30 repeat;這里的30就是30像素下面是個人的理解方式，可能說法不太正確
我們可以想象有四根線，top right bottom left,這四根線都有一個值：
top距離boder上面的距離，right距離border右邊的距離
bottom距離border下面的距離，left距離border左邊的距離
然后的根據(jù)這個值裁剪出來的內(nèi)容一次對應(yīng)到元素上
border-image-slice: 30%;
一個值：四條線的距離都是一樣的。
border-image-slice: 10% 30%;
top和bottom是10%
left和right是30%
這里舉兩個極端的例子
border-image-slice: 30% 100%;
border-image-slice: 100% 100%;
效果圖是這樣子的，這里先不給解釋為什么是這樣子的效果。等大家看完四個值的例子，這里就很簡單了。
border-image-slice: 30 30% 45;
top是30
left和right是30%
top是45
width: 200px;
height: 200px;
border: 10px solid #000;
padding: 20px;
border-image: url(./border.png);
border-image-slice: 10 19 1 12;
效果
下面來解析一下這張圖是怎么形成的。
首先我們先來按照border-image-slice: 10 19 1 12;將背景圖分解成9宮格。
然后再來分解效果圖，同樣也是9宮格。
通過兩圖的對比我們來說明是如何對應(yīng)的。
首先是格子1，border-image裁剪出來的是一個三角形，然后再效果圖上是不是也是一個三角形！
然后格子2，border-image裁剪出來的是一個
，效果圖上是這樣子的，單獨(dú)拿出來看是不是一樣，有人說效果圖，明顯拉伸了，沒錯這就得說到另一個屬性了 border-image-repeat 屬性了！它默認(rèn)就是拉伸。
，
最明顯的就是格子7 ，border-image沒有裁剪出來任何圖像，效果圖上也沒有任何東西呈現(xiàn)。
親測這個值再最新版的火狐和谷歌瀏覽器無法識別?。。?/strong>
這個是和background-repeat基本差不多，但是它只有三個值可以用。
重復(fù)（repeat）、拉伸（stretch） 鋪滿（round）
默認(rèn)值
看一下效果，四個角的黃色都缺了一點(diǎn)，親測在谷歌和火狐瀏覽器下都是這樣子的效果，這是為啥呢？因?yàn)閞epeat是從中間往兩端重復(fù)的。
如圖所示瀏覽器，會自動計算，讓圖像完整的顯示
但是，在谷歌瀏覽器還是有缺的！?。。。?！
指定在邊框外部繪制 區(qū)域 的量。包括上下部和左右部分。如果第四個值被省略，它和第二個是相同的。如果也省略了第三個，它和第一個是相同的。如果也省略了第二個，它和第一個是相同的。不允許border-im-outset擁有負(fù)值。這里就不贅述了，
這里只區(qū)分兩種情況
如果是單純的數(shù)字的話，實(shí)際上的距離是數(shù)字倍的border-width
border: 10px solid #000;
border-image-outset: 10 30;
border-image-outset: 10px 30px;
這兩個可以混在一起寫?。?！
當(dāng)指定 一個 值時，它將作用到 四個方向 ；
當(dāng)指定 兩個 值時，它將分別作用到 top/bottom 和 left/right方向 ；
當(dāng)指定 三個 值時，它將分別作用到 上方、left/right方向、和下方；
當(dāng)指定 四個 值時，它將分別作用到 上方、右方、下方和左方。
默認(rèn)值是border-width的寬度
border: 10px solid #000;
border-image-width: 3 4;
border-image-width: 30% 10%;
81是圖片的尺寸。
border-image-width: 50px 5px;
border-image-slice: 27;
border-image-width: 3 4;
