【01】CSS3 グラデーションは、linear-gradient(線形グラデーション)とradial-gradient(放射状グラデーション)に分けられます_html/css_WEB-ITnose

　CSS3 Gradient 分为 linear-gradient（线性渐变）和 radial-gradient（径 向渐变）。而我们今天主要是针对线性渐变来剖析其具体的用法。为了更好的应用 CSS3 Gradient，我们需要先了解一下目前的几种现代浏览器的内核，主要有 Mozilla（Firefox，Flock等）、 WebKit（Safari、Chrome等）、Opera（Opera浏览器）、Trident（讨厌的IE浏览器）。

　　本文照常忽略IE不管，我们主要看看在 Mozilla、Webkit、Opera 下的应用，当然在 IE 下也可以实现，他需要通过 IE 特有的滤镜来实现，在后面会列出滤镜的使用语法，但不会具体介绍如何实用，感兴趣的可以搜索相关技术文档。

一、线性渐变在 Mozilla 下的应用

　　语法：

1. -moz-linear-gradient([||,]?,[,]*)

 

　　参数：其共有三个参数，第一个参数表示线性渐变的方向，top 是从上到下、left 是从左到右，如果定义成 left top，那就是从左上角到右下角。

第二个和第三个参数分别是起点颜色和终点颜色。你还可以在它们之间插入更多的参数，表示多种颜色的渐变。如图所示：

　　

　　根据上面的介绍，我们先来看一个简单的例子：

　　HTML：

CSS:

1. .example {
2. width:150px;
3. height:80px;
4. }

特にない場合以降の例ではすべて、この html と css の基本コードを使用します。 dは、このdivにシンプルなグラデーションスタイルを適用します：

example1 {

2. -moz-linear-gradient（top、＃ccc、＃000）;

効果は次のとおりです:

2. Webkit での線形グラデーションの適用

構文:

-webkit-linear-gradient([ ,]?,[,]*)//最新リリースの記述構文

1. -webkit-gradient(,[,] ?,[,]?[,]*)//古い文法記述規則

パラメータ:

-webkit-gradientはグラデーション用のWebkitエンジンの実装パラメータで、全部で5つあります。最初のパラメーターはグラデーションのタイプ (タイプ) を表し、線形 (線形グラデーション) または放射状 (放射状グラデーション) にすることができます。 2 番目のパラメーターと 3 番目のパラメーターはどちらも値のペアで、それぞれ勾配の開始点と終了点を表します。この値のペアは、左上 (左上隅) と左下 (左下隅) などの座標またはキー値の形式で表現できます。 4 番目と 5 番目のパラメーターは、それぞれ 2 つのカラーストップ関数です。 color-stop 関数は 2 つのパラメータを受け取ります。最初のパラメータはグラデーションの位置を表し、0 は開始点、0.5 は中間点、1 は点の色を表します。図に示すように:

まずは昔ながらの書き方の例を見てみましょう:

background:-webkit-gradient(linear,center top,centerbottom,from(#ccc), to( #000 );

-webkit-linear-gradient(top,#ccc, #000);

もうこの効果はブラウザ上で一目瞭然です。同じ効果です。よく比較してみると、Mozilla も Webkit も基本的にはプレフィックスの違いを除けば記述方法は同じです。もちろん、いつかは統一できればそれに越したことはありません。それ。開発時間を大幅に節約できます。

3. Opera での線形グラデーションの適用

構文:

1. -o-linear-gradient([||,]? , [,]);/* Opera 11.10+ */

パラメータ:

-o-linear-gradient には 3 つのパラメータがあります。最初のパラメータは線形グラデーションの方向を表します。lefttop として定義されている場合は、左上隅から右下隅までです。 2 番目と 3 番目のパラメータはそれぞれ開始色と終了色です。それらの間にさらにパラメータを挿入して、複数の色のグラデーションを表すこともできます。 (注: Opera は限定されたバージョンをサポートしています。このサンプル テストはすべて Opera11.1 バージョンで行われており、後でプロンプトは表示されません)、図に示すように:

サンプル コード:

background:-o-線形勾配（TOP、＃CCC、＃000）;構文:

1. filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=#1471da, endColorstr=#1C85FB);/*IE*/
3. -ms-filter:"progid:DXImageTransform. Microsoft.gradient (GradientType=0, startColorstr=#1471da, endColorstr=#1C85FB)";/*IE8+*/

IE はフィルターに依存してグラデーションを実現します。 startColorstr は開始点の色を表し、endColorstr は終了点の色を表します。 GradientType はグラデーションのタイプを表します。0 はデフォルト値で垂直方向のグラデーションを示し、1 は水平方向のグラデーションを表します。図に示すように:

上記では、主に上記の 4 つのコア モジュールの下で線形グラデーションの実装方法を紹介します。次に、主に Mozilla、Webkit、Opera の 3 つの主要なモジュールの下でさまざまな線形グラデーションの例を実装します。上記の構文から、線形グラデーションを作成するには、開始点とグラデーションの方向 (または角度) を作成し、開始色を定義する必要があることが明確にわかります。 ([||,]?,[,]*)

-webkit-linear-gradient([ ||,]?,[,]*)

-o-linear-gradient([||,]? & lt;停止 & gt;, & lt; 停止 & gt; [, & lt; 停止 & gt;]*)

背景: -moz-linear-Gradient (左、#) ACE, #f96);/*Mozilla*/

background:-webkit-gradient(linear,050%,100%50%,from(#ace),to(#f96));/*Webkit の古いグラデーション* /

background:-webkit-linear-gradient(left,#ace,#f96);/*Webkit の新しいグラデーション*/

background:-o-linear-gradient(left,#ace,#f96);/ *Opera11 */

2. 効果は次のとおりです:
4. Starting Point は、backgroundposition と同様に機能します。水平位置と垂直位置をパーセンテージまたはピクセル単位で設定したり、水平方向に左/中央/右を使用したり、垂直方向に上/中央/下を使用したりできます。位置は左上隅から始まります。水平または垂直位置を指定しない場合は、デフォルトで中央に設定されます。その動作メソッドには主に次のものが含まれます: 上→下、左→右、下→上、右→左など。次に、主に実装の効果を 1 つずつ見ていきます:

1. 中央 (水平方向) から開始します。 ) と上 (垂直方向) は上→下:

/* Firefox 3.6+ */

background:-moz-linear-gradient(top,#ace,#f96);

/* Safari 4 ～ 5、Chrome 1 ～ 9 */ /* -webkit-gradient(, [, ]?, [, ]? [, ]*) */

background:-webkit-gradient(linear,top, from (#ace),to(#f96));

/* Safari 5.1 以降、Chrome 10 以降 */

1. background:-webkit-linear-gradient(top,#ace,#f96);
2. /* Opera 11.10+ + (縦方向) も左→右:
/* Firefox 3.6+ */
background:-moz-linear-gradient(left,#ace,#f96);
/* Safari 5.1 以降、Chrome 10 以降 */
background:-webkit-linear-gradient(left,#ace,#f96);
/* Opera 11.10 以降 */

background:-o-linear-gradient (left,# ace,#f96);

効果は次のとおりです:

3. 左 (水平方向) と上 (垂直方向) から開始します:

背景:-moz -linear-gradient(左上,#ace,#f96);
背景:-webkit-linear-gradient(左上,#ace,#f96);
背景:-o-linear -gradient(left top, #ace,#f96);

効果は以下の通りです:

4、線形グラデーション（偶数ストップあり）:

1. /* Firefox 3.6+ */
2. background:-moz-linear-gradient(left,#ace,#f96,#ace,#f96 ,#ace);
3. /* Safari 4-5、Chrome 1-9 */
4. background:-webkit-gradient(linear, 左上, 右上, from(#ace), color-stop(0.25,# f96)、color-stop(0.5,#ace)、color-stop(0.75,#f96)、to(#ace));
5. /* Safari 5.1+、Chrome 10+ */
6. background:-webkit- Linear-gradient(left,#ace,#f96,#ace,#f96,#ace);
7. /* Opera 11.10+ */
8. background:-o-linear-gradient(left,#ace,#f96, #ace,#f96,#ace);

效果如下：

5、指定された任意のストップ付き：

1. /* Firefox 3.6+ */
2. 背景:-moz-linear-gradient(left,#ace,#f96 5%,#ace,#f96 95%,#ace);
3. /* Safari 4-5、Chrome 1-9 */
4. 背景:- webkit-gradient(linear, 左上, 右上, from(#ace), color-stop(0.05,#f96), color-stop(0.5,#ace), color-stop(0.95,#f96), to( #ace));
5. /* Safari 5.1 以降、Chrome 10 以降 */
6. 背景:-webkit-linear-gradient(left,#ace,#f96 5%,#ace,#f96 95%,#ace) ;
7. /* Opera 11.10+ */
8. 背景:-o-linear-gradient(left,#ace,#f96 5%,#ace,#f96 95%,#ace);

効果は以下の通り：

６、角度（角度）：

上記の例のように、角度を指定しない場合、開始位置に応じて自動的に決定されます。たとえば、下の 2 つの変化は左中央に同じ起点を持っていますが、角度が 30 度追加されています。 moz-linear-gradient(left,#ace,#f96);

background:-webkit-linear-gradient(left,#ace,#f96);

background:-o-linear-gradient(left,#ace) ,#f96);

加上30度の角度代：

background:-moz-linear-gradient(left 30deg,#ace,#f96); 背景: -webkit-gradient(linear,00,100%100%, from(#ace),to(#f96));

background:-o-linear-gradient(30deg,#ace,#f96);

🎜 🎜 🎜 🎜 🎜 🎜 🎜 🎜 🎜 🎜 🎜 🎜 🎜 🎜 .左から右横方向勾配、一方 90 度は、底部から頂部までの垂直変化を作成します。 ;🎜 🎜background:-webkit-gradient(,, from(#ace), to(#f96));🎜 🎜background:-webkit-linear-gradient(,# ace,#f96);🎜 🎜background:-o-linear-gradient(,#ace,#f96);🎜 🎜 🎜 🎜 🎜 🎜 🎜 🎜 私们来看各角度的区别：🎜

.deg0 {
背景:-moz-linear-gradient(0deg,#ace,#f96);
背景:-webkit-gradient(linear,050%,100%50%,from(# ace),to(#f96));
背景:-webkit-linear-gradient(0deg,#ace,#f96);
背景:-o-linear-gradient(0deg,#ace,#f96);
}
.deg45 {
背景:-moz-linear-gradient(45deg,#ace,#f96);
背景:-webkit-gradient(linear,0100%,100%0%,from (#ace),to(#f96));
背景:-webkit-linear-gradient(45deg,#ace,#f96);
背景:-o-linear-gradient(45deg,#ace,#f96) );
}
.deg90 {
背景:-moz-linear-gradient(90deg,#ace,#f96);
背景:-webkit-gradient(linear,50%100%,50%0% ,from(#ace),to(#f96));
背景:-webkit-linear-gradient(90deg,#ace,#f96);
背景:-o-linear-gradient(90deg,#ace, #f96);
}
.deg135 {
背景:-moz-linear-gradient(135deg,#ace,#f96);
背景:-webkit-gradient(linear,100%100%,00, from(#ace),to(#f96));
背景:-webkit-linear-gradient(135deg,#ace,#f96);
背景:-o-linear-gradient(135deg,#ace,# f96);
}
.deg180 {
背景:-moz-linear-gradient(180deg,#ace,#f96);
背景:-webkit-gradient(linear,100%50%,050%, from(#ace),to(#f96));
背景:-webkit-linear-gradient(180deg,#ace,#f96);
背景:-o-linear-gradient(180deg,#ace,# f96);
}
.deg225 {
背景:-moz-linear-gradient(225deg,#ace,#f96);
背景:-webkit-gradient(linear,100%0%,0100%, from(#ace),to(#f96));
背景:-webkit-linear-gradient(225deg,#ace,#f96);
背景:-o-linear-gradient(225deg,#ace,# f96);
}
.deg270 {
背景:-moz-linear-gradient(270deg,#ace,#f96);
背景:-webkit-gradient(linear,50%0%,50%100 %,from(#ace),to(#f96));
背景:-webkit-linear-gradient(270deg,#ace,#f96);
背景:-o-linear-gradient(270deg,#ace) ,#f96);
}
.deg315 {
背景:-moz-linear-gradient(315deg,#ace,#f96);
背景:-webkit-gradient(linear,0%0%,100 %100%,from(#ace),to(#f96));
背景:-webkit-linear-gradient(315deg,#ace,#f96);
背景:-o-linear-gradient(315deg, #ace,#f96);
}
.deg360 {
背景:-moz-linear-gradient(360deg,#ace,#f96);
背景:-webkit-gradient(linear,050%,100 %50%,from(#ace),to(#f96));
背景:-webkit-linear-gradient(360deg,#ace,#f96);
背景:-o-linear-gradient(360deg, #ace,#f96);
}

效果如下：

除開始位置と角度、你应该指定起止止む色は電線沿いにあります。色の開始数は、指定された位置（百分率または長さで設定）に含まれます。 0% が開始点を表し、100% が終了点を表しますが、領域外の値を使用することもできます。これは、CSS3Gradient によって作成された変化の 1 つであり、ここでの例は完全な効果ではなく、一般的な効果を示すことを目的としています。 ，大家就次に、次の異なる起動色の例を見てみましょう:

background:-moz-linear-gradient(top,#ace,#f96 80%,#f96);

1. background :-webkit-linear-gradient(top,#ace,#f96 80%,#f96);
2. background:-o-linear-gradient(top,#ace,#f96 80%,#f96);

効果は以下の通り:

指定された位置がない場合は、颜色会均匀。次のような分布例:

back ground:-moz-linear-gradient(左, 赤,#f96 , yellow, green,#ace);

background:-webkit-linear-gradient(left,red,#f96, yellow,green,#ace);
background:-o-linear-gradient(left, red, #f96, yellow, green,#ace);

效果如下

7. グラデーションに透明度を適用します:

透明なグラデーションは、たとえば複数の背景を重ねる場合など、特殊効果を作成するのに非常に便利です。これは、画像と白から透明への線形グラデーションの 2 つの背景の組み合わせです。公式 Web サイトの例を見てみましょう:

1. background:-moz-linear-gradient(right, rgba(255,255,255,0), rgba(255,255,255,1)),url(http:// demos.hacks .mozilla.org/openweb/resources/images/patterns/flowers-pattern.jpg);
2. background:-webkit-linear-gradient(right, rgba(255,255,255,0), rgba(255,255,255,1)) 、url( http://demos.hacks.mozilla.org/openweb/resources/images/patterns/flowers-pattern.jpg);
3. background:-o-linear-gradient(right, rgba(255,255,255,0), rgba(255,255,255 ,1)),url(http://demos.hacks.mozilla.org/openweb/resources/images/patterns/flowers-pattern.jpg);

それでは効果を見てみましょう