kei3.jp | head -n 10 diary

-webkit-border-imageが実際にどの様な指定になるのか試してみました。ウェブブラウザとしてはSafariを使いましたがGoogle ChromeとかiPhoneのMobile Safariでも大丈夫だと思います。

書き方としてはSafariのCSSリファレンスを見るとこの様に書かれてあります。

-webkit-border-image: uri top right bottom left x_repeat y_repeat

-webkit-border-image: uri top right bottom left / border x_repeat y_repeat

-webkit-border-image: uri top right bottom left / top_border right_border bottom_border left_border x_repeat y_repeat

-webkit-border-image: function top right bottom left / top_border right_border bottom_border left_border x_repeat y_repeat

説明部分を訳してみるとこんな感じかな。

uri
画像の場所

top
画像の上辺からの距離

right
画像の右辺からの距離

bottom
画像の底辺からの距離

left
画像の左辺からの距離

x_repeat
水平方向の繰り返しスタイル(ここに入るのはrepeat/round/stretchかな)

y_repeat
垂直方向の繰り返しのスタイル

border
全ての枠線の幅

top_border
上辺の枠線の幅

right_border
右辺の枠線の幅

bottom_border
底辺の枠線の幅

left_border
左辺の枠線の幅

function
グラデーションなどの画像を生成するファンクション

最後のfunctionがまだよく分かってないのですが、使い方としてはこんな感じ。

-webkit-border-image: url("dropshadow.gif ") 20 20 20 20 / 20px;

(ドロップシャドウだったら他のCSSで出来るとかって突っ込みは無し)

画像の周辺から必要な幅だけを指定して使用出来るので画像自体の大きさが変わっても、周りからの距離が変化無い場合は、指定を変更しなくても大丈夫です。

参考にしたサイトも書いておきます。

Google ChromeのCSS 3対応状況 - builder by ZDNet Japan
>>関連リンク

ぷちもり作成メモ
>>関連リンク

Mac Dev Center: Safari CSS Reference: Introduction to Safari CSS Reference
>>関連リンク

CSS3も含めてブラウザの対応状況が違ったりして、使い辛いモノもありますが、iPhone用のサイトを作るとか、特定の環境向けにHTMLを書く場合は、-webkit-border-imageなども含めて、積極的に使った方が、画像の手間が省けたりして、生産性は向上するかなと言う気がします。