公開日: 2010年01月10日(Sun)
先日、CSS3入門の手始めとして、border-radius
を使ってみた。今日はその続き。border-image
を試してみる。
border-image
は border-radius
と同様、CSS3の新しいプロパティで、ボーダーに画像を適用する。「ボーダーに画像」というのがいまいちピンとこなかったのだが、使ってみるとこれはなんとも便利だ。
今回は素材として画像を使うが、適当な画像ではちょっとわかりにくいと思ったので、なるべくわかりやすいサンプル画像を用意した。
基本的な使い方は次のようにする。
.borderimg01{
border-image: url("border-image.gif") 40 / 40px stretch;
-moz-border-image: url("border-image.gif") 40 / 40px stretch;
-webkit-border-image: url("border-image.gif") 40 / 40px stretch;
-o-border-image: url("border-image.gif") 40 / 40px stretch;
-ms-border-image: url("border-image.gif") 40 / 40px stretch;
}
Firefoxで表示した図
前回同様、一応、主要ブラウザのベンダープレフィックスをつけているが、現在はFirefox と WebKit系しか対応していないようだ。
書式は次のようになっている。
border-image:
url({$border-image-source})
{$border-image-slice} / {$border-width}
{$border-image-repeat}
;
{$border-image-source}
で指定した画像1枚でボーダー画像を表現する。ボーダー画像というので、上下左右の辺と4隅で8枚必要なんじゃないかと想像していたが違うようだ。
この画像の端っこから何ピクセル分をボーダーとして使用するかを指定しているのが {$border-image-slice}
。上下左右から指定サイズが切り取られ、あまった中央部分が背景として使われる。
{$border-width}
は、border-width
プロパティと同じく実際のボーダーの太さ。
それから最後の {$border-image-repeat}
には、stretch
(伸縮)と repeat
(繰り返し)などが選択できる。
.borderimg02{
border-image: url("border-image.gif") 40 / 40px stretch;
-moz-border-image: url("border-image.gif") 40 / 40px stretch;
-webkit-border-image: url("border-image.gif") 40 / 40px stretch;
-o-border-image: url("border-image.gif") 40 / 40px stretch;
-ms-border-image: url("border-image.gif") 40 / 40px stretch;
background-color:#ffdddd;
}
Firefoxで表示した図
背景色(backgroun-color
)は、border-image
の後ろに隠れてしまって見えなくなった。border-image
に対応していない古いブラウザや、画像を表示しない設定のブラウザのために、背景色も指定しておいた方がよいかも知れない。
.borderimg03{
border-image: url("border-image.gif") 40 / 40px stretch;
-moz-border-image: url("border-image.gif") 40 / 40px stretch;
-webkit-border-image: url("border-image.gif") 40 / 40px stretch;
-o-border-image: url("border-image.gif") 40 / 40px stretch;
-ms-border-image: url("border-image.gif") 40 / 40px stretch;
border:5px solid #000000;
}
Safariで表示した図
Firefoxで表示した図
従来の普通のボーダーと組み合わせてみたところ、border-image
の方が優先されるようだ。border-image
に対応していない古いブラウザや、画像を表示しない設定のブラウザのために、普通のボーダーも一緒に指定しておいた方がよいかも知れない。
ただし、ボーダーの太さは、WebKitでは border
の指定が有効になったが、Firefoxは border-image
の指定の方が採用された。そのへんの解釈にぶれがあるようなので注意が必要。
{$border-image-slice}
と {$border-width}
の指定は、他のさまざまなプロパティと同様に、上右下左の順で値を個別に指定することができる。{$border-image-repeat}
は、縦横の順。
.borderimg04{
border-image: url("border-image.gif") 10 20 30 40 / 10px 20px 30px 40px repeat stretch;
-moz-border-image: url("border-image.gif") 10 20 30 40 / 10px 20px 30px 40px repeat stretch;
-webkit-border-image: url("border-image.gif") 10 20 30 40 / 10px 20px 30px 40px repeat stretch;
-o-border-image: url("border-image.gif") 10 20 30 40 / 10px 20px 30px 40px repeat stretch;
-ms-border-image: url("border-image.gif") 10 20 30 40 / 10px 20px 30px 40px repeat stretch;
}
Firefoxで表示した図
これはすごく便利なプロパティだと思う。前回試した border-radius
よりも、角丸ボックスとしての表現力は高いし、ボーダーをゼロにすれば伸縮可能な背景画像のような使い方もできそう。上手く使えば、かつてない新しい表現のアイデアがまだまだ出てきそうな、そういう可能性を感じる。
今回の実験に使ったデモページはこちらからダウンロード。
今回の実験に使ったブラウザのバージョンは下記の通り。
Internet Explorer 8 | × |
---|---|
Firefox 3.5.5 | ○ |
Safari 4.0.4 | ○ |
Google Chrome 3.0.195.38 | ○ |
Opera 10.53 | △ |
公開日: 2010年01月10日(Sun)