CSS Linear-gradient() の詳細な構文

CSS Linear-gradient() 関数は、色の線形グラデーションを表す を作成します。この関数の結果は、CSS データ型のオブジェクトです。他のグラデーションと同様、CSS 線形グラデーションは CSS カラーではなく、固有の寸法を持たない画像です。つまり、固有の寸法や優先寸法、比率もありません。その特定の寸法は、適用される要素の寸法と一致します。

線形グラデーションは、各点が異なる色を持つ軸 (グラデーション ライン) によって定義されます。グラデーション ラインに対する垂直線は、グラデーション ライン上の点で単一の色を持ちます。

グラデーション ラインは、グラデーション形状と角度を含むコンテナーの中心点によって定義されます。グラデーション ライン上のカラー値は、開始点、終了点、およびその 2 点間のオプションの中間点 (複数の中間点が存在する可能性があります) を含むさまざまな点によって定義されます。

開始点は、開始色の値を表すグラデーション ライン上の点です。開始点は、グラデーション線とコンテナの頂点を通過する垂直線との交点によって定義されます。 (垂直線とグラデーション線は同じ象限内にあります)

同様に、終点は最終的なカラー値を表すグラデーション線上の点です。終点は、グラデーション線と最も近い頂点から出る垂直線との交点によっても定義されますが、終点が中心であるため、始点の対称点から終点を定義する方が理解しやすいです。コンテナ反射点に対する開始点の点。

開始点と終了点の少し複雑な定義は、信じられないほどの頂点効果とも呼ばれる興味深い特性につながります。開始点に近い点は開始点と同じカラー値を持ち、終了点に近い点は終点の値と同じ色。

指定できるのは始点と終点の色の値だけではありません。追加の色の中間点を提供することで、Web 開発者は開始カラー値と終了カラー値の間でよりカスタマイズ可能な トランジション効果 を作成したり、複数のカラー値を含むグラデーション ラインを提供したりすることもできます。

線形グラデーション構文ではグラデーションを繰り返すことはできませんが、色の中間色を使用すると同じ効果を実現できます。 CSSプロパティを使用すると、リアルな繰り返しグラデーション効果を実現できます。

色の中間点の位置が暗黙的に定義されている場合、その前の点と後の点の中間に配置されます。位置は、 または データ型を使用して明示的に定義できます。

グラデーションは CSS で データ型として定義されているため、CSS では画像データ型が必要な場合にのみ使用できます。このため、linear-gradient は、値として を必要とするbackground-color およびその他のプロパティとともに使用しても効果がありません。

構文

Formal grammar: linear-gradient(  [ <angle> | to <side-or-corner> ,]? <color-stop> [, <color-stop>]+ )
                                  \---------------------------------/ \----------------------------/
                                    Definition of the gradient line         List of color stops  
                      where <side-or-corner> = [left | right] || [top | bottom]
                        and <color-stop>     = <color> [ <percentage> | <length> ]?

linear-gradient( 45deg, blue, red );           /* A gradient on 45deg axis starting blue and finishing red */
linear-gradient( to left top, blue, red);      /* A gradient going from the bottom right to the top left starting blue and 
                                                  finishing red */
linear-gradient( 0deg, blue, green 40%, red ); /* A gradient going from the bottom to top, starting blue, being green after 40% 
                                                  and finishing red */

値

グラデーションラインの始点位置を記述します。これには 2 つのキーワードが含まれています。最初のキーワードは垂直位置の左または右を示し、2 番目のキーワードは水平位置の上または下を示します。キーワードの順序は影響せず、すべてオプションです。
上、下、左、右の値は、0度、180度、270度、90度の角度に変換されます。残りの値は上部中央から時計回りの角度に変換されます。グラデーション ラインの終点は、その始点の中心に対して対称です。

<角度>

角度の値を使用して、グラデーションの方向 (または角度) を指定します。 を参照してください。

は、 値と、その後に続くオプションの終了位置 (パーセント値またはグラデーション軸に沿った <長さ>) で構成されます。

CSS グラデーション カラー レンダリングは SVG と同じルールを採用します。

文法の歴史

線形勾配の文法は、2008 年に実装された最初の Apple 提案から開発されました。

-webkit-gradient(<type>, <point> [, <radius>]?, <point> [, <radius>]? [, <stop>]*)

在最初语法中，使用同样的语法实现线性渐变和径向渐变。但这两种渐变所需要的参数有所不同，导致了需要增加第一个参数来区分两种渐变。如果再增加渐变类型，这样的处理方式会变得更加复杂。比如锥形渐变，需要用到函数和不规范的CSS值。W3C并未收到相关草案。

一个替代语法在2009年由Mozilla提出并实现。这个语法需要两个CSS函数，一个用来做线性渐变，另一个用于径向渐变。然而，这个语法并没有被发布产品实现。有人提出了第三种语法，它将线性渐变的语法简化为：

-moz-linear-gradient([ [ [top | bottom] || [left | right] ],]? <color-stop>[, <color-stop>]+);

新的语法不需要to()、from()和color-stop()函数，所以这些函数被丢弃。而top/bottom与left/right的顺序也被标记为不重要，所以Mozilla移除了必需首先定义top/bottom的限制。

新的语法仍然有一个缺点：它只允许水平和垂直渐变。在多次变更解决了方向限制的问题之后，它被增加到CSS Images Values and Content Replacement Level 3 draft in 2011-02-17。

原生支持允许任何方向的渐变

定义magic corner算法，允许使用简便的方式定义端点的颜色，从而简化了开发者的工作

在预乘颜色空间里定义过渡色，从而可以防止在使用不同透明度颜色的情况下出现违和的灰色。在未舍弃原生语法的情况下，带前缀的版本被Webkit和Trident（IE）实现。

linear-gradient( [ [ <angle> | [top | bottom] || [left | right] ],]? <color-stop>[, <color-stop>]+);

属性的添加导致了一些混乱，它应当指向终点方向，但是这些关键字却通常指起始方向。在related W3C CSSWG thread可以查看一些讨论。在一项新的语法中，这个问题被修正。它仍然使用方向关键字，但是在关键字之前增加关键字 to 。这项语法被添加到CSS Images Values and Content Replacement Level 3 draft in 2011-09-08。

linear-gradient([ [ [ <angle> | to [top | bottom] || [left | right] ],]? <color-stop>[, <color-stop>]+);

以上应当是最终语法。

【相关推荐】

1. CSS3免费视频教程

2. CSS3中linear-gradient的实例详解

3. 详解CSS3中lineaer-gradient使用方法

4. 深入详解CSS3中斜向线性渐变lineaer-gradient

5. 关于CSS3中linear-gradient参数的详解

以上がCSS Linear-gradient() の詳細な構文の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。