CSS背景色グラデーション対応書き方_html/css_WEB-ITnose

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%);}

説明: linear-gradient の具体的な使用方法については、ここをクリックしてください。

ie フィルター: filter

linear-gradient は ie9 以下ではサポートされていないため、ie6 - ie8 ではフィルターを使用して問題を解決できます。コードは次のとおりです:

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

filter はプライベート プロパティであるためie のフィルター効果を ie9 用に個別に処理する必要があるため、コードは次のとおりです:

: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;}

PS:

実際のプロジェクトでは、角丸とグラデーションの組み合わせに遭遇することがよくあります。上記の書き方を使用すると、ie9 でバグが発生します (背景色を完全にカットできません)。 ie9 の下) のソリューションは SVG です。詳細を表示するには、ここをクリックしてください。