border-image-slice

概要

CSS の border-image-slice プロパティは、border-image-source で定義されたボーダー画像を 4隅、4辺と中央の 9 つの領域に切り分けて、中央部分を非表示にします。

4 つの値を与えて、画像を切り分ける線を動かします。値が 4 つ指定されていないときは、CSS の 4-値構文に当てはめて欠けた値が推測されます。

中央部分は描画されませんが、キーワード fill がセットされていれば描画されます。このキーワードはプロパティの他の値の前後、あるいは間のどこに置いても構いません。

border-image-repeat、border-image-width、border-image-outset は、ボーダー画像の使い方を定義するプロパティです。

簡略化プロパティ border-image は、このプロパティをデフォルトに戻すかもしれません。

• 初期値 100%
• 適用対象 全要素。ただし border-collapse が collapseのときはテーブル要素内部にあるものを除く
• 継承 しない
• 相対値の基準 ボーダー画像のサイズ
• メディア visual
• 計算値 1 つから 4 つの percentage（指定があれば）または絶対的 length。加えてキーワード fill
• アニメーションの可否 不可

構文

形式文法: [<number> | <percentage>]{1,4} && fill?

border-image-slice: slice                  /* One-value syntax   */  E.g. border-image-slice: 30%; 
border-image-slice: horizontal vertical    /* Two-value syntax   */  E.g. border-image-slice: 10% 30%; 
border-image-slice: top vertical bottom    /* Three-value syntax */  E.g. border-image-slice: 30 30% 45; 
border-image-slice: top right bottom left  /* Four-value syntax  */  E.g. border-image-slice: 7 12 14 5; 

border-image-slice: … fill /* The fill value can be placed between any value */ E.g. border-image-slice: 10% fill 7 12;

border-image-slice: inherit

値

slice

切り分ける線を決める、4 つのオフセットの <数量> または <割合> です。<length> 値は使えず、無効値になることに注意してください。<数量> はラスタ画像ではピクセルを、ベクター画像では座標を表します。また、<割合> 値は画像の幅や高さに対する比率です。負の値は無効で、元の高さや幅よりも大きな値は100% におさめられます。

horizontal

横に切り分ける線を決める、top および bottom の 2 つのオフセットの <数量> または <割合> です。<length> 値は使えず、無効値になることに注意してください。<数量> はラスタ画像ではピクセルを、ベクター画像では座標を表します。また、<割合> 値は画像の幅や高さに対する比率です。負の値は無効で、元の高さや幅よりも大きな値は100% におさめられます。

vertical

縦に切り分ける線を決める、right および left の 2 つのオフセットの <数量> または <割合> です。<length> 値は使えず、無効値になることに注意してください。<数量> はラスタ画像ではピクセルを、ベクター画像では座標を表します。また、<割合> 値は画像の幅や高さに対する比率です。負の値は無効で、元の高さや幅よりも大きな値は100% におさめられます。

top

top の切り分け線を決めるオフセットの <数量> または <割合> です。<length> 値は使えず、無効値になることに注意してください。<数量> はラスタ画像ではピクセルを、ベクター画像では座標を表します。また、<割合> 値は画像の幅や高さに対する比率です。負の値は無効で、元の高さや幅よりも大きな値は100% におさめられます。

bottom

bottom の切り分け線を決めるオフセットの <数量> または <割合> です。<length> 値は使えず、無効値になることに注意してください。<数量> はラスタ画像ではピクセルを、ベクター画像では座標を表します。また、<割合> 値は画像の幅や高さに対する比率です。負の値は無効で、元の高さや幅よりも大きな値は100% におさめられます。

right

right の切り分け線を決めるオフセットの <数量> または <割合> です。<length> 値は使えず、無効値になることに注意してください。<数量> はラスタ画像ではピクセルを、ベクター画像では座標を表します。また、<割合> 値は画像の幅や高さに対する比率です。負の値は無効で、元の高さや幅よりも大きな値は100% におさめられます。

left

left の切り分け線を決めるオフセットの <数量> または <割合> です。<length> 値は使えず、無効値になることに注意してください。<数量> はラスタ画像ではピクセルを、ベクター画像では座標を表します。また、<割合> 値は画像の幅や高さに対する比率です。負の値は無効で、元の高さや幅よりも大きな値は100% におさめられます。

fill

中央の画像スライスを背景画像より上に表示することを示すキーワードです。

inherit

4 つすべての値が、親要素の計算値を継承することを示すキーワードです。

例

仕様

ブラウザ実装状況

関連情報

• border-image 関連 CSS プロパティ: border-image 、 border-image-source 、 border-image-width 、 border-image-slice 、 border-image-repeat 、 border-image-outset