Spartan で CSS の border-image を使ってみる。

普段 CSS の border で色を指定していますが
それを画像にすることができるプロパティです。
4隅と4辺に画像が適応できます。
所謂、スマートフォンアプリやゲーム制作でつかわれている9パッチと呼ばれるものです。
こちら IE 11 から使用できます。

対応状況はこんな感じです

Can I use... Support tables for HTML5, CSS3, etc

WebPlatform.org の方がくわしいのでこちらもご参考に。

border-image · css · WPD · WebPlatform.org

Spartan の場合、 webkit のベンダープレフィックスで fill キーワードが使用できるため、Chrome 同様中央も背景画像が適応されます。

使用しているボーダー画像

サンプル

http://toshihirogoto.github.io/border-image/

ちなみに Chrome の場合、等倍でないと継ぎ目が怪しくなります。