border-image
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since February 2017.
CSS 屬性 border-image
可以讓你在元素的邊框上擺上圖片。這讓呈現看似很複雜的一個網頁的小單元簡單很多,它可以省最多九個元素。
警告:官方的 CSS3 規範描述的 border-image 屬性在這個功能被凍結並出現在 Gecko 1.9.1 的釋出版之後改變很多。因此,這項功能的語法跟呈現方法很可能在未來 Gecko 的釋出版改變。特別是選擇性的 border-width
參數,它覆蓋既有 border-width
取值的這項特性已經從規範移除了,因此勢必也會在未來的 Gecko 被拿掉。
瀏覽器會顯示 border-image
指定的圖片而不是 border-style
給的邊框樣式,但是若它的取值是 none
或是因某些理由無法顯示該圖片,瀏覽器就會顯示邊框樣式。border-image
會畫一個額外的背景圖片在原來 background-image
指定的背景圖片之上。
語法
/* source | slice */
border-image: linear-gradient(red, blue) 27;
/* source | slice | repeat */
border-image: url("/images/border.png") 27 space;
/* source | slice | width */
border-image: linear-gradient(red, blue) 27 / 35px;
/* source | slice | width | outset | repeat */
border-image: url("/images/border.png") 27 23 / 50px 30px / 1rem round space;
/* 全域值 */
border-image: inherit;
border-image: initial;
border-image: revert;
border-image: revert-layer;
border-image: unset;
取值
- none
-
不顯示圖片,使用邊框樣式。
- <圖片>(必填)
-
圖片值是一個
<uri>
,例:url(http://example.org/image.png)
。 - <數> | <百分比>(必填)
-
一個、兩個、三個、四個分別代表從頂邊、右邊、底邊、左邊從圖片外圍到切圖線的距離,將圖片切為九塊:四個角、四個邊跟一個中間部份。
一個值的話,該值用於圖片的全部四個邊。 兩個值得話,值用於:一、頂邊與底邊 二、右邊與左邊。 三個值的話,值用於:一、頂邊 二、右邊與左邊 三、底邊。 四個值的情況,四個值分邊用在圖片的頂邊、右邊、底邊、左邊。
在 Gecko 1.9.1 (Firefox 3.5) 圖片的中間那個部份會被當做元素的背景。這在未來的版本可能會改變。
百分比 由圖片的長度/寬度計算。 數 但表圖片的像素(若為點陣圖)或向量座標(若為 SVG)。
- <邊框寬度> (選擇性)
-
如果斜線 / 出現在屬性值的話,一個、兩個、三個或是四個在它之後的取值會被當成是
border-width
的取值使用。取值的順序如同border-width
。 - stretch | round | repeat (選擇性)
-
一個或兩個關鍵字,指定邊上的圖片跟中間部份要如何縮放及鋪擺。
stretch
(預設值)縮放該圖片,使其與配置大小相等。round
鋪擺該圖片,但也縮放它使得被配置範圍鋪滿整數張該圖片。repeat
直接鋪擺該圖片。 第一個關鍵字的對象是頂邊,中間跟底邊的圖片,而第二個關鍵字的對象是左邊跟右邊的邊框。如果第二個不存在,則沿用第一個關鍵字的設定。如果兩者皆不存在,預設值為stretch
。
形式定義
預設值 | as each of the properties of the shorthand:
|
---|---|
Applies to | all elements, except internal table elements when border-collapse is collapse . It also applies to ::first-letter . |
繼承與否 | no |
Percentages | as each of the properties of the shorthand:
|
Computed value | as each of the properties of the shorthand:
|
Animation type | as each of the properties of the shorthand:
|
形式語法
border-image =
<'border-image-source'> ||
<'border-image-slice'> [ / <'border-image-width'> | / <'border-image-width'>? / <'border-image-outset'> ]? ||
<'border-image-repeat'>
<border-image-source> =
none |
<image>
<border-image-slice> =
[ <number [0,∞]> | <percentage [0,∞]> ]{1,4} &&
fill?
<border-image-width> =
[ <length-percentage [0,∞]> | <number [0,∞]> | auto ]{1,4}
<border-image-outset> =
[ <length [0,∞]> | <number [0,∞]> ]{1,4}
<border-image-repeat> =
[ stretch | repeat | round | space ]{1,2}
<image> =
<url> |
<gradient>
<length-percentage> =
<length> |
<percentage>
<url> =
<url()> |
<src()>
<url()> =
url( <string> <url-modifier>* ) |
<url-token>
<src()> =
src( <string> <url-modifier>* )
範例
[這裡還需要一些活範例]
#header {
-moz-border-image: url(border.png) 27 27 27 27 round round;
}
.button {
-moz-border-image: url(button.png) 0 5 0 5;
}
.example {
-moz-border-image: url(example.jpg) 3 4 6 8 / 10px 12px 14px 22px;
}
/* 鮮見例,在 Firefox 3.5 下看起來像是完全伸展的 background-image */
div {
-moz-border-image: url(bgimage.png) 0;
}
規範
Specification |
---|
CSS Backgrounds and Borders Module Level 3 # the-border-image |
瀏覽器兼容性
BCD tables only load in the browser