資訊專欄INFORMATION COLUMN
摘要：用于給邊框貼上背景圖像類似于中的背景屬性。重復(fù)性取值為重復(fù)只是其中之一，其余兩個是平鋪和拉伸。其中，是默認值。例如表示水平方向平鋪，垂直方向重復(fù)。不進行拉伸，不湊整。效果如下白框為部分資料來源網(wǎng)絡(luò)親們，看懂沒不懂請留言，幫你解答。。
border-image用于給border（邊框）貼上背景圖像
類似于CSS中的background（背景）屬性。 例如：background:url(xx.jpg) 27px no-repeat;指的是圖片(url(xx.jpg))，位置(27px)，重復(fù)性(no-repeat)。
border-image與此類似，border-image包括圖片，剪裁位置（與background位置一樣，也是數(shù)值，也支持百分值），重復(fù)性。
例如：border-image:url(border.png) 27 repeat; 指的就是圖片(url(border.png))，剪裁位置(27)，重復(fù)方式(repeat)。
下面我們將border-image的復(fù)合寫法分解描述， border-image的主要參數(shù)就是上面提到的三個：圖片，剪裁位置，重復(fù)性。 其實還有另外兩個，文章最后面再講。更好理解1、圖片(border-image-source)
border-image的背景圖使用url()調(diào)用，圖片可以是相對路徑或是絕對路徑，也可以不使用圖片，即border-image:none;
2、圖片剪裁位置(border-image-slice)沒有單位，默認單位就是像素(px)。例如：border-image:url(border.png) 27 repeat;這里的27專指27px。
支持百分比值，百分比值大小是相對于邊框圖片的大小，假設(shè)邊框圖片大小為400px*300px，則20%的實際效果就是剪裁了圖片的60px 80px 60px 80px的四邊大小。
剪裁特性。類似于CSS中的clip屬性。其有1~4個參數(shù)，代表上右下左四個方位的剪裁，符合CSS普遍的方位規(guī)則（與margin，padding等或border-width一致），舉個簡單的例子，前面提到，支持百分比寬度，所以這里“30% 35% 40% 30%”的示意可以用下圖表示：
距離圖片上部30%的地方，距離右邊35%，距離底部40%，左邊30%的地方各剪裁一下。也就是對圖片進行了“四刀切”，形成了九個分離的區(qū)域，這就是九宮格，這是下面深入講解border-image的基礎(chǔ)。
3、重復(fù)性(border-image-repeat)取值為repeat（重復(fù)）只是其中之一，其余兩個是round（平鋪）和stretch（拉伸）。其中，stretch是默認值。
參數(shù)0~2個，0則使用默認值 – stretch，例如：border-image:url(border.png) 30% 40%;就等同于border-image:url(border.png) 30% 40% stretch stretch;；1則表示水平方向及垂直方向均使用此參數(shù)；2個參數(shù)的話則第一個參數(shù)表水平方向，第二個參數(shù)表示垂直方向。例如：border-image:url(border.png) 30% 40% round repeat;表示水平方向round（平鋪），垂直方向repeat（重復(fù)）。
關(guān)于round 和repeat 的區(qū)別。
round會湊整填充（進行了適度的拉伸）。repeat不進行拉伸，不湊整。 具體效果看文章后邊的例子。
通過裁切屬性值，將邊框背景圖切出了“九宮格”的模型，那這張背景圖怎么對應(yīng)地貼在div的邊框上呢？
<————————>
如圖 在border-image中的橙紅色的四個邊角只會呆在border的四個角,并且水平和垂直方向均被拉伸來填充border的四個角。
如圖 上下區(qū)域即border-top-image和border-bottom-image受到第一個參數(shù)——水平方向效果影響：如果為repeat，則此區(qū)域被水平重復(fù)(round水平平鋪，stretch水平拉伸)來填充對應(yīng)的上下border【該區(qū)域在垂直方向上首先會按所對應(yīng)的border-image-width的值等比縮放，然后再按參數(shù)設(shè)置在邊框水平方向上進行重復(fù)或平鋪或拉伸】
左右區(qū)域border-left-image和border-right-image 的作用效果亦然【該區(qū)域在水平方向上首先會按所對應(yīng)的border-image-width的值等比縮放，然后再按參數(shù)設(shè)置在邊框垂直方向上進行重復(fù)或平鋪或拉伸】
我們用下圖(27×3)px *(27×3)pxpng 做實驗，我給不同部位加了一個序號做標志，便于觀察。
// 加一個藍色背景的父級，便于我們分析效果。
.border_image {
width: 400px;
height: 115px;
border: 3em double orange;
-webkit-border-image: url(border.png) 27 round;
border-image: url(border.png) 27 round;
}
.box {
background: blue;
}
效果如下
//去掉重復(fù)屬性，即默認都為stretch border-image: url(border.png) 27;
效果如下
//使用repeat border-image: url(border.png) 27 repeat;
效果如下
//邊框?qū)挾雀淖? border-image: url(border.png) 27 repeat stretch;
border-width: 3rem 1rem;
效果如下
5、(邊框背景寬度)border-image-width這個屬性默認是邊框的寬度，用來限制相應(yīng)區(qū)域背景圖的范圍， 首先相應(yīng)背景區(qū)域的圖像會根據(jù)這個屬性值進行縮放。然后再重復(fù)或平鋪或拉伸。 在復(fù)合寫法中應(yīng)該位于 slice屬性 和repeat屬性中間 用“/”間隔 如：border-image:url(border.png) 27 / 6rem / repeat;
語法：border-image-width: [
length 帶 px, em, in … 單位的尺寸值 percentage 百分比 number 不帶單位的數(shù)字；它表示 border-width 的倍數(shù) auto 使用 auto， border-image-width 將會使用 border-image-slice 的值
border: 3em double orange;
border-image: url(border.png) 27 round;
border-image-width: 6rem;
效果如下
（白框為border）
border-image-width: 1.5rem;
效果如下
（白框為border）
border: 3em double orange;
border-image: url(border.png) 27 round;
border-image-width: 6rem 1.5rem;
效果如下
（白框為border）
語法：border-image-outset: [| ]{1,4} 相當于把原來的貼圖位置向外延伸。不能為負值，試一下就知道。 在復(fù)合寫法中應(yīng)該位于 border-image-width 后面，用“/”間隔 如：border-image:url(border.png) 27 / 6rem / 1.5rem /repeat; 向外延伸1.5rem再貼圖。。
border: 3em double orange;
border-image: url(border.png) 27 round;
border-image-width: 1.5rem;
border-image-outset: 1.5rem;
效果如下：
（白框為border）
ps 部分資料來源網(wǎng)絡(luò)
親們，看懂沒？不懂請留言，幫你解答。。保會。。
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/112518.html
摘要：用于給邊框貼上背景圖像類似于中的背景屬性。重復(fù)性取值為重復(fù)只是其中之一，其余兩個是平鋪和拉伸。其中，是默認值。例如表示水平方向平鋪，垂直方向重復(fù)。不進行拉伸，不湊整。效果如下白框為部分資料來源網(wǎng)絡(luò)親們，看懂沒不懂請留言，幫你解答。。 border-image用于給border（邊框）貼上背景圖像 類似于CSS中的background（背景）屬性。 例如：background:url...
摘要：一鋪搞定一鋪清袋粵語的一鋪搞定其實就是一次完成全部工作的意思，上面關(guān)于的屬性，要是每次都逐個設(shè)置那要敲多少次鍵盤啊。。。語法粵語的一鋪清袋其實就是把之前的成果一次性歸零。 前言 ?當CSS3推出border-radius屬性時我們是那么欣喜若狂啊，一想到終于不用再添加額外元素來模擬圓角了，但發(fā)現(xiàn)border-radius還分水平半徑和垂直半徑，然后又發(fā)現(xiàn)border-top-left/...
摘要：屬性用來指定邊框所需素材的路徑，語法可以參照。當圖片碰到邊界時，如果超過則被截斷。圖片會根據(jù)邊框的尺寸動態(tài)調(diào)整圖片的之間的間距直至正好可以鋪滿整個邊框。如下圖后續(xù)是屬性所以存在兼容性問題，需要在屬性前面設(shè)置等 border-image簡介 css3中新增了一個屬性border-image，這個屬性允許開發(fā)者使用圖片來定義邊框,擴充了 CSS2 中僅有的幾個預(yù)定義邊框樣式(border-...
閱讀 3107·2021-02-22 17:12
閱讀 728·2019-08-30 15:55
閱讀 3106·2019-08-30 15:54
閱讀 1397·2019-08-29 16:56
閱讀 1869·2019-08-29 15:13
閱讀 1730·2019-08-29 13:19
閱讀 610·2019-08-26 13:40
閱讀 2829·2019-08-26 10:26
