CSS3 border-image-slice 屬性
實(shí)例
規(guī)定圖像邊框的向內(nèi)偏移:
div
{
border-image-source: url(border.png);
border-image-slice: 50% 50%;
}
定義和用法
border-image-slice 屬性規(guī)定圖像邊框的向內(nèi)偏移。
默認(rèn)值: | 100% |
---|---|
繼承性: | no |
版本: | CSS3 |
JavaScript 語法: | object.style.borderImageSlice="50% 50%" |
語法
border-image-slice: number|%|fill;
注釋:該屬性規(guī)定圖像的上、右、下、左側(cè)邊緣的向內(nèi)偏移,圖像被分割為九個(gè)區(qū)域:四個(gè)角、四條邊以及一個(gè)中間區(qū)域。除非使用了關(guān)鍵詞 fill,否則中間的圖像部分會被丟棄。如果省略第四個(gè)數(shù)值/百分比,則與第二個(gè)值相同。如果省略第三個(gè)值,則與第一個(gè)值相同。如果省略第二個(gè)值,則與第一個(gè)值相同。
值 | 描述 |
---|---|
number | 數(shù)字值,代表圖像中像素(如果是光柵圖像)或矢量坐標(biāo)(如果是矢量圖像)。 |
% | 相對于圖像尺寸的百分比值:圖像的寬度影響水平偏移,高度影響垂直偏移。 |
fill | 保留邊框圖像的中間部分。 |
相關(guān)頁面
CSS3 教程:CSS3 邊框