CSS 參考手冊

CSS @規(guī)則(RULES)

CSS 屬性大全

CSS3 border-image-source 屬性 CSS3 border-image-repeat 屬性

CSS3 border-image-slice 屬性使用方法及示例

border-image-slice CSS屬性將border-image-source指定的圖像劃分為9個區(qū)域:四個角、四個邊和一個中間。它通過指定4個向內(nèi)偏移量來實現(xiàn)這一點，這些偏移量通常創(chuàng)建一個3×3的網(wǎng)格。

邊界圖像的中間部分將被丟棄，并且不被邊界本身使用，但是background-image如果出現(xiàn)了fill關(guān)鍵字，則將其用作背景圖像。

下表為此屬性的用法說明和版本歷史記錄，以及該屬性在javascript腳本中的使用語法。

默認值：	100%
適用于：	該屬性能被應(yīng)用于任何元素，但當表格元素（如 tr,th,td ）的border-collapse屬性值為collapse時border-image-slice屬性無效。它也適用于::first-letter。
繼承：	沒有
可動畫制作：	否。請參見動畫屬性。
版本：	CSS3的新功能
JavaScript語法：	object.style.borderImageSlice="60% 60%"

border-image-slice的使用語法

該屬性的語法如下：

border-image-slice: [ number | percentage ] 1 to 4 values | fill | initial | inherit

下面的示例演示了如何使用border-image-slice屬性。

示例

.box {
    width: 300px;
    height: 150px;
    border: 15px solid transparent;
    border-image-source: url("border.png");
    border-image-slice: 30;
    border-image-repeat: round;
}

測試看看?/?

屬性值

下表描述了此屬性的值。

值	描述
number	對于光柵圖像，表示圖像的距離（以像素為單位），對于矢量圖像，表示矢量坐標。
percentage	相對于圖像的大?。核狡频膱D像寬度，垂直偏移的圖像高度。
fill	如果存在，則保留圖像的中間部分。否則，將中間視為透明。
initial	將此屬性設(shè)置為其默認值。
inherit	如果指定，則關(guān)聯(lián)元素采用其父元素border-image-slice屬性的計算值。

瀏覽器兼容性

border-image-slice屬性瀏覽器的兼容性，下表中的數(shù)字表示支持該屬性的瀏覽器最低版本號；所有主流瀏覽器均支持該屬性。

	Firefox 15+ Google Chrome15+ Internet Explorer 11+ Apple Safari 6+ Opera 15+

進一步閱讀

請參考以下教程：CSS3 Border和CSS Border。

相關(guān)屬性：border-image，border-image-source，border-image-repeat，border-image-width，border-image-outset，border。

CSS3 border-image-source 屬性 CSS3 border-image-repeat 屬性