CSS3のborder-imageで気をつけたいこと

border-imageを使って気づいたことを書く

記載方法

http://www.htmq.com/css3/border-image.shtml

ここに書いてあることと同じだけど、こんな感じになる。

border-image(url(hogehoge) slice / width / outset repeat)

きちんと書くとこうなる。どこまで実装が間に合ってるのかわからないけど、sliceはpxつけちゃだめだけどwidthは付けないといけないっぽい。これは本当の動作なのかが分からないが注意が必要。

chromeとfirefoxの違い

ここからが本番で、chromeとfirefoxで動きが違って、色々困ったのでメモ。

塗りつぶしの違い

chromeでvender prefixが付いている時だけ、sliceにfill属性が入る。fillが入ると塗りつぶされるわけだが、vender prefixが抜けるとfill属性が外れる。多分fill属性が外れるほうが正常な動作だと思われる。fillを入れる場所は以下。

border-image(url(hogehoge) slice fill / width / outset repeat)

border-widthの違い

chromeではborder-imageをつけるとborder-widthも自動的に変わるけど、firefoxの場合はborder-imageを設定しただけだとborder-widthが変わらない。この場合は、透明なborderを先に引いておくことで同一動作になる。これ、順序が変わるとborder-imageが効かなくなるから注意が必要。

border: solid width transparent;
border-image(url(hogehoge) slice fill / width /outset repeat)

まとめ

とりあえず、記載した2つに注意すれば同じような見た目にすることができることがわかった。まだ実装段階だから色々齟齬が有るんだろうけど、最終的には統一してほしいなぁ。ちなみにIEはしらない。あんなやつ爆発すればいいと思う。