2013年6月7日金曜日

IEでグラデーションを使う方法( border も正常に表示させたい方法)

IEでグラデーションを設定するにはCSSに以下を記述します。


例)white と cornsilk の2色でグラデーションの場合

  filter: progid:DXImageTransform.Microsoft.gradient(startColorStr=white, endColorStr=cornsilk, GradientType=0);
  -ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=white,endColorstr=cornsilk, GradientType=0);
  zoom:1;



しかし、この方法では border が消えてしまうため、PIE.htc を利用してみる。
上記3行を次の2行に変更し、PIE.htc を htmlファイルと同一フォルダに入れておく。
(PIE.htc は無料で入手できるので探してください)


例)white と cornsilk の2色でグラデーションの場合

  -pie-background: linear-gradient(white, cornsilk);
  behavior: url(PIE.htc);



この方法を使っても border が表示されないときがありますが、
タグの記述より上にCSSの定義を記述すればOKです。
(これに気付くのに1日ハマりました)