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 サイトの他の関連記事を参照してください。