CSS3 Pre-Reference



border-image

ボーダー画像・ショートハンド

試す

コード

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

サンプル

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

フレームのサンプル

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

コメントする


対応ブラウザ

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

パラメータ

<‘border-image-source’> || <‘border-image-slice’> [ / <‘border-image-width’>? [ / <‘border-image-outset’> ]? ]? || <‘border-image-repeat’>
初期値 各プロパティを参考
適用 すべての要素(ただし”border-collaplse:collaplse”の要素を除く)
継承 しない
レベル 3
%の解釈 -
適用メディア Visual
参考文献 CSS Backgrounds and Borders Module Level 3#5.5. The ‘border-image’ shorthand

解説

ボーダー画像のプロパティを一括で指定します。

FirefoxなどのMozilla系は”-moz-border-image”、Safari/ChromeなどのWebKit系は”-webkit-border-image”というショートハンド・プロパティで対応しています。

実装は不完全で、”border-image-width”にパーセンテージや数値が使えない、”border-image-outset”が指定できないという問題が残っています。

詳細は各プロパティを参考にしてください。

トラックバック

投稿されたコメント