背景色のグラデーションをCSSに対応させる方法を詳しく解説

最近のプロジェクトでは、フォーム送信ボタンの背景やデータ表示のタイトル背景など、さまざまな場所で線形グラデーションが使用されています。以前は、1pxの画像を切り取ってrepeat-xする方法でした。以下ではこの効果を実現するためのcssの使い方を紹介します。

css3: 線形グラデーション

例: 黒から白へのグラデーション、コードは次のとおりです:

.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: filter

linear-gradientはie9以下ではサポートされていないため、ie6 - ie8ではfilterを使用して問題を解決できます。コードは次のとおりです。つまり、プライベート プロパティなので、IE9 用にフィルター効果を個別に処理する必要があります。 コードは次のとおりです:

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

概要:

要約すると、線形グラデーションの互換性のある記述方法は次のとおりです。

りー

以上が背景色のグラデーションをCSSに対応させる方法を詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。