CSS border-image-slice 屬性

定義和用法

border-image-slice 屬性規定圖像邊框的向內偏移。

另請參閱：

CSS3 教程：CSS3 邊框

實例

規定圖像邊框的向內偏移：

div
{
border-image-source: url(border.png);
border-image-slice: 50% 50%;
}

CSS 語法

border-image-slice: number|%|fill;

注釋：該屬性規定圖像的上、右、下、左側邊緣的向內偏移，圖像被分割為九個區域：四個角、四條邊以及一個中間區域。除非使用了關鍵詞 fill，否則中間的圖像部分會被丟棄。如果省略第四個數值/百分比，則與第二個值相同。如果省略第三個值，則與第一個值相同。如果省略第二個值，則與第一個值相同。

屬性值

值 描述
number 數字值，代表圖像中像素（如果是光柵圖像）或矢量坐標（如果是矢量圖像）。
% 相對于圖像尺寸的百分比值：圖像的寬度影響水平偏移，高度影響垂直偏移。
fill 保留邊框圖像的中間部分。

技術細節

默認值： 100%
繼承性： no
版本： CSS3
JavaScript 語法： object.style.borderImageSlice="50% 50%"

瀏覽器支持

表格中的數字注明了完全支持該屬性的首個瀏覽器版本。

Chrome IE / Edge Firefox Safari Opera
15.0 11.0 15.0 6.0 15.0

請參閱 border-image 屬性。