mozilla
Your Search Results

    border-image-repeat

    概要

    CSS の border-image-repeat プロパティは、ボーダー画像を、繰り返したり、ボーダーのサイズにあわせたりする方法を定義します。値を 1 つだけ渡すとその値で四辺すべてのボーダーを設定します。2 つ渡すと、それぞれ横方向のボーダー、縦方向のボーダーを設定します。

    • 初期値 stretch
    • 適用対象 全要素。ただし border-collapsecollapse のときはテーブル要素内部にあるものを除く
    • 継承 しない
    • メディア visual
    • 計算値 指定通り
    • アニメーションの可否 不可

    構文

    形式文法: [ stretch | repeat | round ]{1,2}
    border-image-repeat: type                      /* One-value syntax */       E.g. border-image-value: stretch;
    border-image-repeat: horizontal vertical       /* Two-value syntax */       E.g. border-image-width: round space;
    
    border-image-repeat: inherit
    

    type
    画像の繰り返し方法を表す stretchrepeatroundspace のいずれかのキーワード。1 値構文でのみ使えます
    horizontal
    画像の繰り返し方法を表す stretchrepeat、round、space のいずれかのキーワード。2 値構文でのみ使えます
    vertical
    画像の繰り返し方法を表す stretchrepeat、round、space のいずれかのキーワード。2 値構文でのみ使えます
    stretch
    2 つのボーダー間をちょうど埋めるように画像を引き伸ばすためのキーワードです
    repeat
    2 つのボーダー間をちょうど埋めるまで画像を繰り返すためのキーワードです
    round
    2 つのボーダー間をちょうど埋めるまで画像を繰り返すためのキーワードです。整数回の繰り返しでちょうど埋まらない場合は、ちょうど埋まるようにサイズを調整します
    inherit
    4 つすべての値が親要素の計算値から継承されることを示すキーワードです

    さまざまな値の使用例は border-image をご覧ください。

    仕様

    仕様書 策定状況 コメント
    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) 未サポート ? ?

    space 値は勧告候補版の早い段階で提案されていましたが、どのブラウザも実装しなかったため取り除かれました。今後、草案で再登場するかもしれません。

    関連情報

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

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