CSSborder -image-sliceプロパティ
例
境界線の画像をスライスする方法を指定します。
#borderimg {
border-image-slice: 30%;
}
定義と使用法
このプロパティは、 border-image-sourceでborder-image-slice
指定された画像をスライスする方法を指定します
。画像は常に9つのセクションにスライスされます:4つのコーナー、4つのエッジ、および中央。
fillキーワードが設定されていない限り、「中央」の部分は完全に透明として扱われます。
ヒント:border-imageプロパティ(すべてのborder- image- *プロパティを設定するための省略形プロパティ)も確認してください。
デフォルト値: | 100% |
---|---|
遺伝性の: | いいえ |
アニメート可能: | 番号。アニメート可能について読む |
バージョン: | CSS3 |
JavaScript構文: | object .style.borderImageSlice = "30%" |
ブラウザのサポート
表の数字は、プロパティを完全にサポートする最初のブラウザバージョンを示しています。
Property | |||||
---|---|---|---|---|---|
border-image-slice | 15.0 | 11.0 | 15.0 | 6.0 | 15.0 |
CSS構文
border-image-slice: number|%|fill|initial|inherit;
注:プロパティborder-image-slice
は1から4の値を取ることができます。4番目の値を省略すると、2番目の値と同じになります。3つ目も省略した場合は1つ目と同じです。2つ目も省略した場合は1つ目と同じです。
プロパティ値
Value | Description | Play it |
---|---|---|
number | The number(s) represent pixels for raster images or coordinates for vector images | |
% | Percentages are relative to the height or width of the image | |
fill | Causes the middle part of the image to be displayed | |
initial | Sets this property to its default value. Read about initial | |
inherit | Inherits this property from its parent element. Read about inherit |
関連ページ
CSSチュートリアル:CSSボーダー画像
CSSリファレンス:border-imageプロパティ
CSSリファレンス:border-image-outsetプロパティ
CSSリファレンス:border-image-repeatプロパティ
CSSリファレンス:border-image-sourceプロパティ
CSSリファレンス:border-image-widthプロパティ
HTML DOMリファレンス:borderImageSliceプロパティ