border-image-outset
border-image-outsetはボーダー画像が描画する領域外のサイズを指定するためのプロパティです。
ボーダー画像は通常はborder-box領域の内側にborder-image-widthに指定されたサイズだけ描画されますが、border-image-outsetを指定することでborder-box領域の外側つまりmarginなどで指定されている領域に描画することができます。
.target{
width:27px;
height:27px;
border: 27px solid orange;
border-image-source:url("/sample/images/border.png");
border-image-slice :27;
border-image-width : 1;
border-image-outset : 0;
border-image-repeat : round;
}
数値nが指定された場合は、border-image-widthで指定されたボーダー幅のn倍のサイズを領域外に描画します。
領域外の幅を辺毎に指定する場合は以下のように指定します。
幅指定がひとつの場合は全辺で指定された領域外の幅を利用します。
border-image-outset : 1;
幅指定が2つの場合は最初に指定された値で上下の領域外の幅を、2番目に指定された値で左右の領域外の幅が指定できます。
border-image-outset : 2 1;
幅指定が3つの場合は最初に指定された値で上辺の領域外の幅を、2番目に指定された値で左右の領域外の幅を、3番目に指定された値で下辺の領域外の幅が指定できます。
border-image-outset : 2 1.5 1;
幅指定が4つの場合は最初に指定された値で上辺の領域外の幅を、2番目に指定された値で右辺の領域外の幅を、3番目に指定された値で下辺の領域外の幅を、4番目に指定された値で左辺の領域外の幅できます。
border-image-outset : 1 2 1.5 1
対応ブラウザ
IE | Chrome | Safari | Firefox | iOS | Android |
---|---|---|---|---|---|
◯ 11〜 | ◯ 15〜 | △ 5.1〜 ◯ 7〜 |
◯ 15〜 | △ 3.2〜 ◯ 6〜 |
△ 2.1〜 ◯ 4.4〜 |
◯は実装済み、△はベンダープレフィックス付の実装、☓は未実装です。
参考URL
6.4. Edge Overhang: the ‘border-image-outset’ property - CSS3 - W3C
登録日 : 2014年07月14日 最終更新日 : 2014年7月14日
同じカテゴリー(Border)のエントリー
- border
- border-left
- border-bottom
- border-right
- border-top
- border-image
- border-image-repeat
- border-image-outset
- border-image-width
- border-image-slice
- border-image-source
- border-radius
- border-bottom-left-radius
- border-bottom-right-radius
- border-top-right-radius
- border-top-left-radius
- border-left-width
- border-bottom-width
- border-right-width
- border-top-width
- border-width
- border-left-style
- border-bottom-style
- border-right-style
- border-top-style
- border-style
- border-left-color
- border-bottom-color
- border-right-color
- border-top-color
- border-color