css3 背景 gradient_html/css_WEB-ITnose-htmlチュートリアル-php.cn

css3 背景 gradient_html/css_WEB-ITnose

WBOY

リリース： 2016-06-24 11:40:45

オリジナル

1085 人が閲覧しました

CSS を使用して背景のグラデーションを作成できることを知る前は、いつも PS を使用して、作成した Web ページに背景のグラデーション画像を適用していました。しかし、少し前に、CSS3 でも背景のグラデーションを実行できることを知り、背景のグラデーション効果を作成するのがはるかに簡単になりました。CSS3 で背景のグラデーションを実行する方法をいくつか紹介します。

1. 線形グラデーション

//自上而下的线性渐变div{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*/}

ログイン後にコピー

//从左往右的线性渐变div{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*/}

ログイン後にコピー

最初のパラメータはグラデーションの開始方向であり、その後にグラデーションの終了方向を続ける必要はありません。上から下に、または左から右に指定することもできます。

2 番目のパラメーターは、グラデーションの開始位置の色です。

3 番目のパラメーターは、グラデーションの終了位置の色です。

2. stop() 関数の線形勾配を追加します

div{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. 放射状グラデーション (円の中心から円の外側へ)

div{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 を使用して背景のグラデーションを作成する場合は、ブラウザーの互換性に注意を払う必要があります。