詳解css3之border-image

jackzou 發(fā)布于2019-08-21 10:46 / 2126人閱讀

摘要：屬性用來指定邊框所需素材的路徑，語法可以參照。當(dāng)圖片碰到邊界時，如果超過則被截斷。圖片會根據(jù)邊框的尺寸動態(tài)調(diào)整圖片的之間的間距直至正好可以鋪滿整個邊框。如下圖后續(xù)是屬性所以存在兼容性問題，需要在屬性前面設(shè)置等

border-image簡介

css3中新增了一個屬性border-image，這個屬性允許開發(fā)者使用圖片來定義邊框,擴(kuò)充了 CSS2 中僅有的幾個預(yù)定義邊框樣式(border-style)。
border-image 是一個簡寫屬性，分別設(shè)定了以下幾個屬性。

border-image-source

border-image-slice

border-image-width

border-image-outset

border-image-repeat

為什么圖片可以作為邊框？

在開始學(xué)習(xí)border-image之前我有一個疑問，圖片是怎么應(yīng)用到容器的邊框上的？

看下圖

簡單的說就是把圖片的中間部分去掉，從而形成一個類似邊框的框架。

那么如何使用被劃分出來的八格素材來生成一個邊框呢？

左上、右上、左下、右下的四格素材分別作為邊框的四個角，而上下左右的四格素材分別經(jīng)過不同形式的擴(kuò)展，形成邊框的四條邊。上圖很好的說明了圖片形成邊框的處理形式。

border-image-source

border-image-source屬性用來指定邊框所需素材的路徑，語法可以參照backgound-image。
需要注意的是，如果只設(shè)置了border-image-source屬性而其他屬性使用缺省值，則邊框素材不會被劃分九宮格，而是將整個素材按照邊框?qū)挾瓤s放至合適尺寸后安放在邊框四角。





邊框圖片

如下圖

border-image-slice

border-image-slice屬性用來設(shè)置邊框素材的切割尺寸，如下圖，依次是上橫切割線，右豎切割線，下橫切割線，左豎切割線。數(shù)值分別代表從上、右、下、左邊緣向素材中心延伸的像素/百分比數(shù)
注意：切割的數(shù)值只接受像素和百分比兩個單位，并且像素單位必須省略，即只接收數(shù)值或者百分比的形式。例如，border-image-slice: 10 10 30 10代表圖片素材按照下圖的樣式被切割：

border-image-width

border-image-width用來設(shè)置邊框素材的寬度,當(dāng)同時設(shè)置了border-image-width和border-width屬性時，那么邊框的實際寬度由border-width屬性決定。此時，如果border-image-width屬性小于border-width屬性，邊框圖片會沿邊框的外側(cè)分布而內(nèi)側(cè)留空形成 padding 的效果；如果border-image-width屬性大于border-width屬性，邊框圖片會仍會沿邊框的外側(cè)分布而內(nèi)測溢出，如下圖

border-image-repeat

border-image-repeat屬性用來設(shè)置上下左右四邊(即2、4、5、7四個素材塊)的重復(fù)形式，分別有stretch repeat round space四個取值

stretch:指定用拉伸方式來填充邊框背景圖。

repeat:指定用平鋪方式來填充邊框背景圖。當(dāng)圖片碰到邊界時，如果超過則被截斷。

round:指定用平鋪方式來填充邊框背景圖。圖片會根據(jù)邊框的尺寸動態(tài)調(diào)整圖片的大小直至正好可以鋪滿整個邊框。

space:指定用平鋪方式來填充邊框背景圖。圖片會根據(jù)邊框的尺寸動態(tài)調(diào)整圖片的之間的間距直至正好可以鋪滿整個邊框。

border-image-outset

border-image-outset屬性會產(chǎn)生使 border-image 相對于原始位置向外側(cè)推移的效果，設(shè)置border-image-outset屬性會使 border-image 溢出，但不會影響整個盒模型的尺寸，因此在設(shè)置此屬性時要特別注意防止元素間的相互干擾。

如下圖

后續(xù)

border-image是css3屬性所以存在兼容性問題，需要在屬性前面設(shè)置-webkit等