読者です 読者をやめる 読者になる 読者になる

Browser

Microsoft Edge(Project Spartan, Internet Explorer) 、ブラウザ周辺、Web フロントエンド開発、UI、など

Microsoft Edge まとめページ

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 同様中央も背景画像が適応されます。

f:id:x67x6fx74x6f:20150424171401p:plain

 

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

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

 

サンプル

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

 

f:id:x67x6fx74x6f:20150424171652p:plain

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

スポンサーリンク