CSS3 border-image 徹底明白

songjz 發布于2019-08-29 13:19 / 1715人閱讀

摘要：用于給邊框貼上背景圖像類似于中的背景屬性。重復性取值為重復只是其中之一，其余兩個是平鋪和拉伸。其中，是默認值。例如表示水平方向平鋪，垂直方向重復。不進行拉伸，不湊整。效果如下白框為部分資料來源網絡親們，看懂沒不懂請留言，幫你解答。。

border-image用于給border（邊框）貼上背景圖像

類似于CSS中的background（背景）屬性。 例如：background:url(xx.jpg) 27px no-repeat;指的是圖片(url(xx.jpg))，位置(27px)，重復性(no-repeat)。
border-image與此類似，border-image包括圖片，剪裁位置（與background位置一樣，也是數值，也支持百分值），重復性。
例如：border-image:url(border.png) 27 repeat; 指的就是圖片(url(border.png))，剪裁位置(27)，重復方式(repeat)。

下面我們將border-image的復合寫法分解描述，

border-image的主要參數就是上面提到的三個：圖片，剪裁位置，重復性。
其實還有另外兩個，文章最后面再講。更好理解

1、圖片(border-image-source)

border-image的背景圖使用url()調用，圖片可以是相對路徑或是絕對路徑，也可以不使用圖片，即border-image:none;

2、圖片剪裁位置(border-image-slice)

沒有單位，默認單位就是像素(px)。例如：border-image:url(border.png) 27 repeat;這里的27專指27px。

支持百分比值，百分比值大小是相對于邊框圖片的大小，假設邊框圖片大小為400px*300px，則20%的實際效果就是剪裁了圖片的60px 80px 60px 80px的四邊大小。

剪裁特性。類似于CSS中的clip屬性。其有1~4個參數，代表上右下左四個方位的剪裁，符合CSS普遍的方位規則（與margin，padding等或border-width一致），舉個簡單的例子，前面提到，支持百分比寬度，所以這里“30% 35% 40% 30%”的示意可以用下圖表示：

距離圖片上部30%的地方，距離右邊35%，距離底部40%，左邊30%的地方各剪裁一下。也就是對圖片進行了“四刀切”，形成了九個分離的區域，這就是九宮格，這是下面深入講解border-image的基礎。

3、重復性(border-image-repeat)

取值為repeat（重復）只是其中之一，其余兩個是round（平鋪）和stretch（拉伸）。其中，stretch是默認值。

參數0~2個，0則使用默認值 – stretch，例如：border-image:url(border.png) 30% 40%;就等同于border-image:url(border.png) 30% 40% stretch stretch;；1則表示水平方向及垂直方向均使用此參數；2個參數的話則第一個參數表水平方向，第二個參數表示垂直方向。例如：border-image:url(border.png) 30% 40% round repeat;表示水平方向round（平鋪），垂直方向repeat（重復）。

關于round 和repeat 的區別。
round會湊整填充（進行了適度的拉伸）。repeat不進行拉伸，不湊整。 具體效果看文章后邊的例子。

4、實際渲染規則

通過裁切屬性值，將邊框背景圖切出了“九宮格”的模型，那這張背景圖怎么對應地貼在div的邊框上呢？

<————————>

如圖在border-image中的橙紅色的四個邊角只會呆在border的四個角,并且水平和垂直方向均被拉伸來填充border的四個角。

如圖上下區域即border-top-image和border-bottom-image受到第一個參數——水平方向效果影響：如果為repeat，則此區域被水平重復(round水平平鋪，stretch水平拉伸)來填充對應的上下border【該區域在垂直方向上首先會按所對應的border-image-width的值等比縮放，然后再按參數設置在邊框水平方向上進行重復或平鋪或拉伸】

左右區域border-left-image和border-right-image 的作用效果亦然【該區域在水平方向上首先會按所對應的border-image-width的值等比縮放，然后再按參數設置在邊框垂直方向上進行重復或平鋪或拉伸】

我們用下圖(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;
    }

效果如下

   //去掉重復屬性，即默認都為stretch
   border-image: url(border.png) 27;

效果如下

  //使用repeat
  border-image: url(border.png) 27 repeat;

效果如下

    //邊框寬度改變
    border-image: url(border.png) 27 repeat stretch;
    border-width: 3rem 1rem;

效果如下

5、(邊框背景寬度)border-image-width

這個屬性默認是邊框的寬度，用來限制相應區域背景圖的范圍，
首先相應背景區域的圖像會根據這個屬性值進行縮放。然后再重復或平鋪或拉伸。

在復合寫法中應該位于 slice屬性 和repeat屬性中間 用“/”間隔
如：border-image:url(border.png) 27 / 6rem / repeat;

語法：border-image-width: [ | | | auto ]{1,4}

length 帶 px, em, in … 單位的尺寸值
percentage 百分比
number 不帶單位的數字；它表示 border-width 的倍數
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）

6、（邊框背景擴散）border-image-outset

語法：border-image-outset: [  |  ]{1,4}
相當于把原來的貼圖位置向外延伸。不能為負值，試一下就知道。

在復合寫法中應該位于 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 部分資料來源網絡

親們，看懂沒？不懂請留言，幫你解答。。保會。。

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/112518.html

CSS3 border-image 徹底明白

摘要：用于給邊框貼上背景圖像類似于中的背景屬性。重復性取值為重復只是其中之一，其余兩個是平鋪和拉伸。其中，是默認值。例如表示水平方向平鋪，垂直方向重復。不進行拉伸，不湊整。效果如下白框為部分資料來源網絡親們，看懂沒不懂請留言，幫你解答。。 border-image用于給border（邊框）貼上背景圖像類似于CSS中的background（背景）屬性。例如：background:url...

chenjiang3 2019-08-20 19:07 評論0 收藏0
CSS3 新特性

摘要：語法說明對象選擇器投影方式軸偏移量軸偏移量模糊半徑陰影擴展半徑陰影顏色內陰影，向右偏移，向下偏移，模糊半徑，陰影縮小屬性的參數設置取值陰影類型此參數可選。 CSS3 是最新的 CSS 標準，并且完全向后兼容，不過目前W3C 仍然在對 CSS3 規范進行開發，雖然標準的規范還沒有正式發布，但是現代瀏覽器已經支持相當多的 CSS3 屬性了。CSS3 提供了很多可以把玩的新特性，模糊了之前只...

justjavac 2019-08-29 13:07 評論0 收藏0
CSS魔法堂：重拾Border之——圖片作邊框

摘要：一鋪搞定一鋪清袋粵語的一鋪搞定其實就是一次完成全部工作的意思，上面關于的屬性，要是每次都逐個設置那要敲多少次鍵盤啊。。。語法粵語的一鋪清袋其實就是把之前的成果一次性歸零。前言 ?當CSS3推出border-radius屬性時我們是那么欣喜若狂啊，一想到終于不用再添加額外元素來模擬圓角了，但發現border-radius還分水平半徑和垂直半徑，然后又發現border-top-left/...

linkFly 2019-08-30 12:59 評論0 收藏0
詳解css3之border-image

摘要：屬性用來指定邊框所需素材的路徑，語法可以參照。當圖片碰到邊界時，如果超過則被截斷。圖片會根據邊框的尺寸動態調整圖片的之間的間距直至正好可以鋪滿整個邊框。如下圖后續是屬性所以存在兼容性問題，需要在屬性前面設置等 border-image簡介 css3中新增了一個屬性border-image，這個屬性允許開發者使用圖片來定義邊框,擴充了 CSS2 中僅有的幾個預定義邊框樣式(border-...

jackzou 2019-08-21 10:46 評論0 收藏0
CSS3 邊框

摘要：邊框用，你可以創建圓角邊框，添加陰影框，并作為邊界的形象而不使用設計程序，如。在本章中，您將了解以下的邊框屬性圓角在中添加圓角棘手。 CSS3 邊框用 CSS3，你可以創建圓角邊框，添加陰影框，并作為邊界的形象而不使用設計程序，如 Photoshop。在本章中，您將了解以下的邊框屬性： border-radius box-shadow border-image CSS3 圓角在 ...

Charles 2019-08-29 13:25 評論0 收藏0