ホームページ > 記事 > ウェブフロントエンド > css3を使用して背景のグラデーションメソッドを実装する
CSS を使用して背景のグラデーションを作成できることを知る前は、作成した Web ページに背景のグラデーション画像を適用するために常に PS を使用していました。しかし、少し前に、CSS3 でも背景のグラデーションを実行できることを知り、背景のグラデーション効果を作成するのがはるかに簡単になりました。CSS3 で背景のグラデーションを実行する方法をいくつか紹介します。
1. 線形グラデーション
//自上而下的线性渐变 p{ width:400px; height:100px; padding:5px; border:1px solid #ccc; background:-webkit-linear-gradient(top, blue, red);/* Safari, Chrome*/ background:-moz-linear-gradient(top, blue, red);/* Firefox*/ background:-o-linear-gradient(top, blue, red);/* Opera, Opera mobile*/ }
//从左往右的线性渐变 p{ width:400px; height:100px; padding:5px; border:1px solid #ccc; background:-webkit-linear-gradient(left, blue, red);/* Safari, Chrome*/ background:-moz-linear-gradient(left, blue, red);/* Firefox*/ background:-o-linear-gradient(left, blue, red);/* Opera, Opera mobile*/ }
最初のパラメータはグラデーションの開始方向であり、その後にグラデーションの終了方向を続ける必要はありません。 right;
2 番目のパラメーター 最初のパラメーターはグラデーションの開始位置の色で、3 番目のパラメーターはグラデーションの終了位置の色です。
2. stop() 関数の線形勾配を追加します
p{ width:400px; height:100px; padding:5px; border:1px solid #ccc; background:-webkit-linear-gradient(left, blue, #1a82f7 15%, #2F2727 50%, #1a82f7 85%, red);/* Safari, Chrome*/ background:-moz-linear-gradient(left, blue, #1a82f7 15%, #2F2727 50%, #1a82f7 85%, red);/* Firefox*/ background:-o-linear-gradient(left, blue, #1a82f7 15%, #2F2727 50%, #1a82f7 85%, red);/* Opera, Opera mobile*/ }
上記のコードの意味は、左の 15%、50%、85%、そして最後に右の順序です。カラーグラデーションの色は青です。#1a82f7、#2F2727、#1a82f7、そして赤に進みます。
3. 放射状グラデーション (円の中心から円の外側へ)
p{ width:200px; height:200px; padding:5px; border:1px solid #ccc; background:-webkit-radial-gradient(circle, blue, red);/* Safari, Chrome*/ background:-moz-radial-gradient(circle, blue, red);/* Firefox*/ }
上記のコードの意味は、青から赤までの色が中心から広がる放射状のグラデーションです。外周に向かって円を描きます。
パラメータの円を楕円に置き換えると、楕円放射状のグラデーションになります。
4. IE ブラウザの背景グラデーションに直面する
IE ブラウザは、グラデーションを実現するために IE 独自のフィルターを使用することしかできません。
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#00ffff,endColorstr=#9fffff,grandientType=1);
最初のパラメータ: グラデーションの開始位置の色
2 番目のパラメータ: グラデーションの終了位置の色
3 番目のパラメータ: グラデーションの種類、0 は垂直グラデーションを表します。 1 は水平方向の勾配を表します。
注: IE ブラウザの背景のグラデーション設定を背景に設定する必要はありません。フィルターを直接使用してください。
CSS3 の背景グラデーション機能は強力ですが、ブラウザーの互換性の問題もあります。 css3 背景グラデーション属性の現在の特定のサポートは、IE10、FireFox3.6 以降、Safari4.0 以降、Chrome、Opera11.1 (放射状グラデーションはまだサポートされていません) 以降、IOS 3.2 以降、Opera Mobile11.1、Android です。したがって、CSS3 を使用して背景のグラデーションを作成する場合は、ブラウザーの互換性に注意を払う必要があります。
以上がcss3を使用して背景のグラデーションメソッドを実装するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。