資訊專欄INFORMATION COLUMN
摘要：用于給邊框貼上背景圖像類似于中的背景屬性。重復(fù)性取值為重復(fù)只是其中之一，其余兩個(gè)是平鋪和拉伸。其中，是默認(rèn)值。例如表示水平方向平鋪，垂直方向重復(fù)。不進(jìn)行拉伸，不湊整。效果如下白框?yàn)椴糠仲Y料來源網(wǎng)絡(luò)親們，看懂沒不懂請(qǐng)留言，幫你解答。。
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ù)就是上面提到的三個(gè)：圖片，剪裁位置，重復(fù)性。 其實(shí)還有另外兩個(gè)，文章最后面再講。更好理解1、圖片(border-image-source)
border-image的背景圖使用url()調(diào)用，圖片可以是相對(duì)路徑或是絕對(duì)路徑，也可以不使用圖片，即border-image:none;
2、圖片剪裁位置(border-image-slice)沒有單位，默認(rèn)單位就是像素(px)。例如：border-image:url(border.png) 27 repeat;這里的27專指27px。
支持百分比值，百分比值大小是相對(duì)于邊框圖片的大小，假設(shè)邊框圖片大小為400px*300px，則20%的實(shí)際效果就是剪裁了圖片的60px 80px 60px 80px的四邊大小。
剪裁特性。類似于CSS中的clip屬性。其有1~4個(gè)參數(shù)，代表上右下左四個(gè)方位的剪裁，符合CSS普遍的方位規(guī)則（與margin，padding等或border-width一致），舉個(gè)簡(jiǎn)單的例子，前面提到，支持百分比寬度，所以這里“30% 35% 40% 30%”的示意可以用下圖表示：
距離圖片上部30%的地方，距離右邊35%，距離底部40%，左邊30%的地方各剪裁一下。也就是對(duì)圖片進(jìn)行了“四刀切”，形成了九個(gè)分離的區(qū)域，這就是九宮格，這是下面深入講解border-image的基礎(chǔ)。
3、重復(fù)性(border-image-repeat)取值為repeat（重復(fù)）只是其中之一，其余兩個(gè)是round（平鋪）和stretch（拉伸）。其中，stretch是默認(rèn)值。
參數(shù)0~2個(gè)，0則使用默認(rèn)值 – stretch，例如：border-image:url(border.png) 30% 40%;就等同于border-image:url(border.png) 30% 40% stretch stretch;；1則表示水平方向及垂直方向均使用此參數(shù)；2個(gè)參數(shù)的話則第一個(gè)參數(shù)表水平方向，第二個(gè)參數(shù)表示垂直方向。例如：border-image:url(border.png) 30% 40% round repeat;表示水平方向round（平鋪），垂直方向repeat（重復(fù)）。
關(guān)于round 和repeat 的區(qū)別。
round會(huì)湊整填充（進(jìn)行了適度的拉伸）。repeat不進(jìn)行拉伸，不湊整。 具體效果看文章后邊的例子。
通過裁切屬性值，將邊框背景圖切出了“九宮格”的模型，那這張背景圖怎么對(duì)應(yīng)地貼在div的邊框上呢？
<————————>
如圖 在border-image中的橙紅色的四個(gè)邊角只會(huì)呆在border的四個(gè)角,并且水平和垂直方向均被拉伸來填充border的四個(gè)角。
如圖 上下區(qū)域即border-top-image和border-bottom-image受到第一個(gè)參數(shù)——水平方向效果影響：如果為repeat，則此區(qū)域被水平重復(fù)(round水平平鋪，stretch水平拉伸)來填充對(duì)應(yīng)的上下border【該區(qū)域在垂直方向上首先會(huì)按所對(duì)應(yīng)的border-image-width的值等比縮放，然后再按參數(shù)設(shè)置在邊框水平方向上進(jìn)行重復(fù)或平鋪或拉伸】
左右區(qū)域border-left-image和border-right-image 的作用效果亦然【該區(qū)域在水平方向上首先會(huì)按所對(duì)應(yīng)的border-image-width的值等比縮放，然后再按參數(shù)設(shè)置在邊框垂直方向上進(jìn)行重復(fù)或平鋪或拉伸】
我們用下圖(27×3)px *(27×3)pxpng 做實(shí)驗(yàn)，我給不同部位加了一個(gè)序號(hào)做標(biāo)志，便于觀察。
// 加一個(gè)藍(lán)色背景的父級(jí)，便于我們分析效果。
.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ù)屬性，即默認(rèn)都為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這個(gè)屬性默認(rèn)是邊框的寬度，用來限制相應(yīng)區(qū)域背景圖的范圍， 首先相應(yīng)背景區(qū)域的圖像會(huì)根據(jù)這個(gè)屬性值進(jìn)行縮放。然后再重復(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 將會(huì)使用 border-image-slice 的值
border: 3em double orange;
border-image: url(border.png) 27 round;
border-image-width: 6rem;
效果如下
（白框?yàn)閎order）
border-image-width: 1.5rem;
效果如下
（白框?yàn)閎order）
border: 3em double orange;
border-image: url(border.png) 27 round;
border-image-width: 6rem 1.5rem;
效果如下
（白框?yàn)閎order）
語法：border-image-outset: [| ]{1,4} 相當(dāng)于把原來的貼圖位置向外延伸。不能為負(fù)值，試一下就知道。 在復(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;
效果如下：
（白框?yàn)閎order）
ps 部分資料來源網(wǎng)絡(luò)
親們，看懂沒？不懂請(qǐng)留言，幫你解答。。保會(huì)。。
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/85159.html
摘要：用于給邊框貼上背景圖像類似于中的背景屬性。重復(fù)性取值為重復(fù)只是其中之一，其余兩個(gè)是平鋪和拉伸。其中，是默認(rèn)值。例如表示水平方向平鋪，垂直方向重復(fù)。不進(jìn)行拉伸，不湊整。效果如下白框?yàn)椴糠仲Y料來源網(wǎng)絡(luò)親們，看懂沒不懂請(qǐng)留言，幫你解答。。 border-image用于給border（邊框）貼上背景圖像 類似于CSS中的background（背景）屬性。 例如：background:url...
摘要：語法說明對(duì)象選擇器投影方式軸偏移量軸偏移量模糊半徑陰影擴(kuò)展半徑陰影顏色內(nèi)陰影，向右偏移，向下偏移，模糊半徑，陰影縮小屬性的參數(shù)設(shè)置取值陰影類型此參數(shù)可選。 CSS3 是最新的 CSS 標(biāo)準(zhǔn)，并且完全向后兼容，不過目前W3C 仍然在對(duì) CSS3 規(guī)范進(jìn)行開發(fā)，雖然標(biāo)準(zhǔn)的規(guī)范還沒有正式發(fā)布，但是現(xiàn)代瀏覽器已經(jīng)支持相當(dāng)多的 CSS3 屬性了。CSS3 提供了很多可以把玩的新特性，模糊了之前只...
摘要：一鋪搞定一鋪清袋粵語的一鋪搞定其實(shí)就是一次完成全部工作的意思，上面關(guān)于的屬性，要是每次都逐個(gè)設(shè)置那要敲多少次鍵盤啊。。。語法粵語的一鋪清袋其實(shí)就是把之前的成果一次性歸零。 前言 ?當(dāng)CSS3推出border-radius屬性時(shí)我們是那么欣喜若狂啊，一想到終于不用再添加額外元素來模擬圓角了，但發(fā)現(xiàn)border-radius還分水平半徑和垂直半徑，然后又發(fā)現(xiàn)border-top-left/...
摘要：屬性用來指定邊框所需素材的路徑，語法可以參照。當(dāng)圖片碰到邊界時(shí)，如果超過則被截?cái)?。圖片會(huì)根據(jù)邊框的尺寸動(dòng)態(tài)調(diào)整圖片的之間的間距直至正好可以鋪滿整個(gè)邊框。如下圖后續(xù)是屬性所以存在兼容性問題，需要在屬性前面設(shè)置等 border-image簡(jiǎn)介 css3中新增了一個(gè)屬性border-image，這個(gè)屬性允許開發(fā)者使用圖片來定義邊框,擴(kuò)充了 CSS2 中僅有的幾個(gè)預(yù)定義邊框樣式(border-...
閱讀 2861·2021-09-10 10:51
閱讀 2224·2021-09-02 15:21
閱讀 3216·2019-08-30 15:44
閱讀 886·2019-08-29 18:34
閱讀 1663·2019-08-29 13:15
閱讀 3335·2019-08-26 11:37
閱讀 2707·2019-08-26 10:46
閱讀 1118·2019-08-26 10:26
