css背景色グラデーション互換書き方

最近、プロジェクトでは、フォーム提出ボタンの背景、データ表示のタイトルの背景など、以前のやり方で1 pxピクチャを切ってrepeat-xする線形グラデーションが使われています.次に、cssでこの効果を達成する方法について説明します.
css3:linear-gradient
たとえば、黒が白にグラデーションされ、コードは次のとおりです.

.gradient{
    background: -moz-linear-gradient(top, #000000 0%, #ffffff 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#000000), color-stop(100%,#ffffff));
    background: -webkit-linear-gradient(top, #000000 0%,#ffffff 100%);
    background: -o-linear-gradient(top, #000000 0%,#ffffff 100%);
    background: -ms-linear-gradient(top, #000000 0%,#ffffff 100%);
    background: linear-gradient(to bottom, #000000 0%,#ffffff 100%);
}

 
ieフィルタ:filter
linear-gradientはie 9以下ではサポートされていませんので、ie 6-ie 8ではフィルタを使用して解決できます.コードは次のとおりです.
 

.gradient{
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#ffffff',GradientType=0 );
}

 
filterはieのプライベート属性であるため、ie 9に対してフィルタ効果を個別に処理する必要があります.コードは以下の通りです.

:root {filter:none;}

 
まとめ:
以上より、線形グラデーションの互換性の書き方は以下の通りである.

.gradient{
    background: #000000;
    background: -moz-linear-gradient(top,  #000000 0%, #ffffff 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#000000), color-stop(100%,#ffffff));
    background: -webkit-linear-gradient(top,  #000000 0%,#ffffff 100%);
    background: -o-linear-gradient(top,  #000000 0%,#ffffff 100%);
    background: -ms-linear-gradient(top,  #000000 0%,#ffffff 100%);
    background: linear-gradient(to bottom,  #000000 0%,#ffffff 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#ffffff',GradientType=0 );
}
:root .gradient{filter:none;}

 
cssグラデーションの使い方:http://www.w3cplus.com/content/css3-gradient