CSSでグラデーション IE対応

CSSで

CSS3ではbackground2つ指定できるけど、古いIEではグラデーションとイメージを一括指定できないのでspanにイメージ

PC

カンタンなグラデーションならこれでOK
filter-gradientはIE用

scss

a{
 @include background-image(linear-gradient(#ffaf37, #f99602));
 @include filter-gradient(#ffaf37, #f99602, vertical);
}
span{
 background: url(../../img/arrow-btn.png) 14px center no-repeat #009250;
}

SP

@include background-image(linear-gradient(#○○○, #○○○))はモダンブラウザのみ対応したスタイルになるのでfilterを外すだけ
背景もコンマで区切って2つ指定できる

scss

background: url(../img/arrow-white-right.png) no-repeat top 5px right 5px,linear-gradient(top, #FA4B60, #ff1431) ;
background-size: auto 15px,auto;

IE9

IE9はグラデーションとborder-radiusがあたっていると前者が優先される
どちらかを選ばないといけないが、IE8はどっちもあたらないし、デザイン的には角丸が優先されることが多い
compassだとモダンブラウザのみ対応なので、filterを消すとIE9以下は自動的にグラデーションなしに
このとき別に背景色を指定しておく。