0から目指すWebマスター Web制作に関する備忘録
検索

CSS

borderで背景画像を表示する border-image

border-imageは、一枚の画像で9スライスのデザインが実現できちゃうという優れもの。

残念ながらIE8以下で適用できず、実際にはまだ使えないかなーという印象。プログレッシブエンハンスメントを適用してうまく見せるのは結構難しそうだなー、という感触。
とはいえせっかく調査したので備忘録。
border-image を使ったサンプル

仕様

border-image-source
none(初期値)/ url(画像パス)
border-image-slice
100%(初期値)/ 数値 / ○○% / 数値 fill / ○○% fill
border-image-width
1(初期値)/ ○○px / ○○% / auto
border-image-outset
0(初期値)/ 数値? px?
border-image-repeat
stretch(初期値)/ repeat / round / space

一気書き

border-image
{ border-image-source } { border-image-slice } / { border-image-width } / { border-image-outset } { border-image-repeat }

現段階(2011年4月20日現在)で試して気になった点

これらを踏まえると border-image の指定方法は以下。

background-image:{ border-image-source } { border-image-slice } / { border-image-width } { border-image-repeat };
-moz-background-image:{ border-image-source } { border-image-slice } / { border-image-width } { border-image-repeat };
-webkit-background-image:{ border-image-source } { border-image-slice } / { border-image-width } { border-image-repeat };
-o-background-image:{ border-image-source } { border-image-slice } / { border-image-width } { border-image-repeat };

スマートフォン(iPhone, Android)限定なら

background-image:{ border-image-source } { border-image-slice } / { border-image-width } { border-image-repeat };
-webkit-background-image:{ border-image-source } { border-image-slice } / { border-image-width } { border-image-repeat };

というわけで、背景画像を用意してサンプル。

サンプル

サンプルサンプルサンプルサンプル
html
<div class="sample">サンプルサンプルサンプルサンプル</div>
css
.sample{
display:inline-block;
line-height:40px;
color:#fff;
border-image: url(/img/markup/css_border_image_arrow.png) 23 82 23 26 / 23px 82px 23px 26px;
-moz-border-image: url(/img/markup/css_border_image_arrow.png) 23 82 23 26 / 23px 82px 23px 26px;
-webkit-border-image: url(/img/markup/css_border_image_arrow.png) 23 82 23 26 / 23px 82px 23px 26px;
-o-border-image: url(/img/markup/css_border_image_arrow.png) 23 82 23 26 / 23px 82px 23px 26px;
}

これは便利!!!

いろいろテストしました。実際にソースと見比べながらのほうがイメージ掴めます。
border-image を使ったサンプル