border-image - 枠線画像をまとめて指定する
投稿日: / 更新日:
スタイルシートのborder-imageは、枠線画像の各プロパティをまとめて指定するためのプロパティです。使いこなすには、まずは各プロパティの性質を理解する必要があります。
サンプルコード
border-imageを指定したサンプルコードです。border-image-source(枠線画像)、border-image-slice(画像の切り取り範囲)、border-image-slice(繰り返し表示の形式)をまとめて指定しています。枠線画像を表示するには、あらかじめ、borderを指定しておく必要があります。
div {
border: 40px solid #333 ;
border-image: url( "/border.png" ) 40 round ;
}デモ
border-imageプロパティを指定したデモです。CSSを編集して、どのように変化があるのかを確認してみて下さいね。
値の指定
値の指定方法には順番があります。下記の通りに指定して下さい。
- border-image-source
- border-image-slice / border-image-width / border-image-outset
- border-image-repeat
各値は半角スペース( )で区切って下さい。border-image-slice、border-image-width、border-image-outsetの間は、スラッシュ(/)で区切ります。画像ファイルのパス以外は省略可能です。border-image-sliceを省略してborder-image-width、border-image-outsetを指定したり、border-image-slice、border-image-widthを省略してborder-image-outsetを指定することはできません。下記にいくつかの指定例を載せておきます。
/* 全ての値を指定 */
#element {
border-image: url( "/border.png" ) 40 / 40px / 20px round ;
}
/* [border-image-source]、[border-image-slice]、[border-image-repeat]だけを指定 */
#element {
border-image: url( "/border.png" ) 40 round ;
}
/* [border-image-source]、[border-image-slice]だけを指定 */
#element {
border-image: url( "/border.png" ) 40 ;
}
/* [border-image-slice]を省略して[border-image-width]を指定するとエラー */
#element {
border-image: url( "/border.png" ) 40px ;
}
/* [border-image-slice]、[border-image-width]を省略して[border-image-outset]を指定するとエラー */
#element {
border-image: url( "/border.png" ) 40px ;
}個々の値の指定方法は主に下記の通りです。リンクをクリックすると、デモ、または専用の解説ページを確認できます。
| 項目 | 説明 |
|---|---|
| inherit | 親要素の値を引き継ぐ。例の場合、div要素のborder-imageには、bodyに指定された値(url( "/border.png" ) 40 round)が引き継がれる。 |
| initial | プロパティの初期値が適用される。この場合、画像ファイルが指定されないので枠線画像は表示されない。実質的には意味がない値と言える。 |
| border-image-source | 枠線画像のパスを指定する。 |
| border-image-width | 枠線画像の表示領域の幅を指定する。 |
| border-image-outset | 枠線画像の境界線を外側に広げる。 |
| border-image-repeat | 枠線画像の繰り返しを調整する。 |
| border-image-slice | 枠線画像の切り取りを調整する。 |
ブラウザのサポート
2016年7月現在の、ブラウザのサポート状況は次の通りです。
Chrome
●
15+
2011年10月
Firefox
●
15+
2012年8月
Safari
●
6+
2012年7月
Ie
●
11+
2013年10月
Edge
●
12+
2015年3月
Opera
●
15+
2013年7月
Safari(iOS)
●
6+
時期不明
Ie Mobile
●
11+
2014年7月
Chrome
●
47+
2015年12月
Android
●
4.4+
2014年6月
FF Mobile
●
44+
2016年1月
Opera Mobile
●
33+
2015年10月