border-image-slice

by 2 contributors:

概要

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

The nine slices defined by the CSS border-image shorthand or border-image-slice longhand properties4 つの値を与えて、画像を切り分ける線を動かします。値が 4 つ指定されていないときは、CSS の 4-値構文に当てはめて欠けた値が推測されます。

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

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

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

  • 初期値 100%
  • 適用対象 全要素。ただし border-collapsecollapseのときはテーブル要素内部にあるものを除く
  • 継承 しない
  • 相対値の基準 ボーダー画像のサイズ
  • メディア 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 つすべての値が、親要素の計算値を継承することを示すキーワードです。

仕様

仕様書 策定状況 コメント
CSS Backgrounds and Borders Module Level 3 勧告候補 初回定義

ブラウザ実装状況

機能 Chrome Firefox (Gecko) Internet Explorer Opera Safari
基本サポート 15.0 15.0 (15.0) 未サポート 未サポート 未サポート
機能 Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
基本サポート ? 15.0 (15.0) 未サポート ? ?

関連情報

ドキュメントのタグと貢献者

Contributors to this page: ethertank, sosleepy
最終更新者: ethertank,
サイドバーを隠す