mozilla
Your Search Results

    border-image-slice

    概要

    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: sosleepy, ethertank
    最終更新者: ethertank,
    サイドバーを隠す