CSS3 Pre-Reference



border-image-outset

ボーダー画像のはみ出し

試す

コード

#containe p {
    border: 36px solid transparent;
   
    border-image-source: url(images/frame.png);
    border-image-slice: 36;
    border-image-outset: 50px 5mm 10pt 25px;
}

サンプル

フレーム画像は出羽ママの日記さんのところから無断でお借りしています。そのうち許可申請します。。

フレームのサンプル

 
 
 
 
 
 
 
 
長目のフレームのサンプル
 
 
 
 
 
 
 

コメントする


対応ブラウザ

Firefox
まだ
Chrome/Safari
まだ
Opera
まだ
InternetExplorer
まだ

パラメータ

<長さ> | <正の数値>]{1,4}
初期値 none
適用 すべての要素(ただし”border-collaplse:collaplse”の要素を除く)
継承 しない
レベル 3
%の解釈 -
適用メディア Visual
参考文献 CSS Backgrounds and Borders Module Level 3#5.4. The ‘border-image-outset’ property

解説

ボーダー画像がどれだけボーダー外にはみ出すかを指定します。”オフセット”ではなく”アウトセット”です。

ボーダーと同じ原理で、上、右、下、左の順で指定します。省略された値は対辺の値を参照、値が1つの場合は4辺とも同じ値になります。

数値は、ボーダー幅を1とした倍数として解釈されます。つまり、”border-width:10px”で”border-image-width:2”を指定すると、2倍の20pxの領域にボーダー画像が描画されます。

値”auto”の場合は、”border-image-slice”のスライス幅になります。

今のところ、このプロパティに対応したブラウザはありません。

トラックバック

投稿されたコメント