CSS3 Pre-Reference



border-image-slice

ボーダー画像の切り取り範囲

試す

コード

#containe p {
    border: 36px solid transparent;
   
    border-image-source: url(images/frame.png);
    border-image-slice: 36;
    border-image: url(images/frame.png) 36;
    -moz-border-image: url(images/frame.png) 36;
    -webkit-border-image: url(images/frame.png) 36;
}

サンプル

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

フレームのサンプル

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

コメントする


対応ブラウザ

Firefox
3.5~
Chrome/Safari
3.0~
Opera
10.5~
InternetExplorer
まだ

パラメータ

[<数値> | <パーセンテージ>]{1,4} && fill?
初期値 100%
適用 すべての要素(ただし”border-collaplse:collaplse”の要素を除く)
継承 しない
レベル 3
%の解釈 画像のサイズを参照
適用メディア Visual
参考文献 CSS Backgrounds and Borders Module Level 3#5.2. The ‘border-image-slice’ property

解説

ボーダー画像の切り取る幅を指定します。

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

数値の場合は、ピクセル数として解釈されます。

つまり、例えば”border-image-slice: 10 15% 20% 25”とした場合、以下のように解釈されます。

border-image-slice.png

キーワード”fill”は、最後に一回記述します。キーワードがあった場合、真ん中の画像は使用されません。つまり、角の画像と辺のボーダー画像は描画されますが、中央の背景にあたる部分のボーダー画像は描画されません。

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

FirefoxなどのMozilla系は”-moz-border-image”、Safari/ChromeなどのWebKit系は”-webkit-border-image”というショートハンド・プロパティでのみ対応しています。Operaも”border-image”というショートハンドのみの実装です。
ショートハンド・プロパティの実装も不完全で、”border-image-width”に数値が使えない、”border-image-outset”が指定できないという問題が残っています。

トラックバック

投稿されたコメント