##Value | Description |
# #方向| 角度値を使用して、グラデーションの方向 (または角度) を指定します。 | |
color-stop1、color-stop2、...| は、グラデーションの開始色と終了色を指定するために使用されます。 | |
この関数 (特性) で受け入れられる最初のパラメータは、勾配の角度です。角度を表す値を受け入れることができます (利用可能な単位は deg、rad、## です) # grad または turn) または方向を示すキーワード (top、right、bottom、left) 、左上、右上、右下、または左下)。 2 番目のパラメーターは、一連のカラー ノード (終点の色) を受け入れます。
グラデーション コンテナ (グラデーション ボックス)
グラデーション イメージは、従来の背景イメージとは異なり、サイズ (サイズ制限) がありません。無制限です。次に、グラデーション画像の表示領域は、グラデーションコンテナのサイズによって決まります。 通常、DOM 要素の background-image または background に linear-gradient を使用する場合、その (グラデーション) 表示領域は要素の border-box 領域 (要素の境界ボックス領域がわからない場合は、最初にボックス サイズに関するドキュメントを読むことをお勧めします)。実際、これは background-color、つまり URL を通じて背景画像が導入される表示領域でもあります。
ただし、CSS の background-size でサイズを設定した場合 (200px * 200px など)、グラデーション コンテナー (グラデーション サイズ) は 背景になります。 -sizeサイズ200px * 200pxを設定します。 background-position が別の値に設定されていない場合、デフォルトで DOM 要素の左上隅に表示されます (つまり、background-position: left top)。
CSS では、グラデーションは background の background-image です。つまり、背景画像に適した CSS プロパティはグラデーションにも適しています。
グラデーション ライン
グラデーション コンテナーでは、コンテナーの中心点と色の停止点を結ぶ線をグラデーションと呼びます。ライン。次のセクションでグラデーション角度に関する知識を紹介すると、グラデーションラインの理解が深まるので、次のセクションで詳しく紹介していきます。 グラデーション角度
明らかに、linear-gradient を使用すると、グラデーションの角度によってグラデーションの方向が制御されます。 。次に、それについてさらに詳しく見てみましょう。
C ポイント グラデーション コンテナーの中心点。A は、C ポイントを通過し、# を通過する垂直線です。 ##Cグラデーション線間の角度を指定します。この角度をグラデーション角度と呼びます。
(180deg または .5turn に相当) ):
上記の例では、グラデーション角度が設定されておらず、白から赤のグラデーションカラーが上から下に向かってグラデーションになっています。以下に示すように、tobottom キーワード: 
#次の 2 つの図の効果は、top と 0deg に使用するもので、それらの効果は同じです: 
top キーワードの使用に関するもう 1 つの重要な点は、右上 (または他の隅のキーワード) など、グラデーション コンテナーのサイズに依存することです。 。 
赤から青へのグラデーションが必要な場合、方向は要素の右上です。論理的には、青は要素の右上隅にあり、中央の紫色のグラデーションは左上隅から右下隅まで直線を形成する必要があります。以下の図に示すように:
したがって、右上とは、グラデーション ラインが右上隅を通過することを意味するわけではありません。つまり、グラデーション角度が 45 度を意味するわけではありません。 。 
つまり、linear-gradient が top キーワード (右上、左上、右下、左下) を使用する場合、グラデーション ラインは最初に次の中心点を通過します。要素と頂点が直交し、中心点から垂線がなす角度が勾配角度になります。 グラデーション角度が動的に変化したときにグラデーション ラインがどのように移動するかを見てみましょう: 
回顾一下渐变角度：
渐变线长度a
之前我们看到渐变色停止分布沿着渐变线是需要解释的一件事情。你可能已经注意到了，在前面的示例中，停止的渐变颜色有时候在渐变容器以外的位置，这看起来有点奇怪，但如果你知道其中的逻辑之后，你就不会这么认为了。先看一下这个示例：
我们想要一个red至blue的渐变，渐变的角度是45deg，因为渐变容器的比例，渐变线不能通过右上角。但浏览器想要做什么（规范告诉它做什么），能使右上角是blue。
如果我们让渐变线的开始和结束都在渐变容器的边缘，那么blue将会覆盖渐变容器更大的区域，渐变不会有更多的扩散。
因此，为了做到这一点，渐变线有时不得不延长到渐变容器之外。其实很容器知道它的开始和结束位置。通过最近的角落画一条垂直于渐变线的线，与渐变线交叉的地方，就是渐变的开始和结束位置。
事实上，如果W是渐变容器的宽度，H是渐变容器的高度，A是渐变角度，那么渐变线的长度可以通过下面的公式计算：
abs(W * sin(A)) + abs(H * cos(A))
ログイン後にコピー
渐变色节点（Color stops）
渐变色的每一个可以这样定义：
<color> [<percentage> | <length>]?
ログイン後にコピー
因此不是强制性来指定颜色在渐变线的位置。例如：
如果没有显式指定颜色在渐变线上的位置，这将交给浏览器来确定颜色在渐变线上的位置。最简单的情况下只有两个颜色，颜色1将被放置在渐变线0%位置（渐变线开始位置），颜色2将被放置在100%位置处（渐变线的结束点）。如果有三个颜色，那么颜色1在渐变线的0%，颜色2在渐变线的50%，颜色3在渐变线的100%。在上面的这个示例中，有五个颜色，那么它们的位置分别在0%、25%、50%、75%和100%。它们将沿着渐变线平均分布渐变颜色。
当然，也可以在渐变线上显式自定义渐变颜色在渐变线的位置。每个位置可以用百分比表示（相对于渐变线计算），也可以是任何一个CSS长度单位。比如下面这个示例：
正如你所看到的，五个颜色的每个颜色都有自己的位置，而且是以像素为单位。这些位置从渐变线的开始位置处开始计算。
使用这些位置，你可以想出各种各样的漂亮效果。这样你可以做一个多色渐变：
上图中，有七个颜色，其中下一个颜色是在上一个颜色开始位置，这意味弟浏览器不需要填满两个颜色之余间的空间。
当然这样蛮好的也很有趣，如果你把颜色位置配合一起来使用会是什么样的情形。然后让浏览器自动分配你省略的颜色位置。
在上面的示例中，第二个颜色orange没有明确的指定其在渐变线上的位置，所以浏览器会自动计算出其位置。它可以根据第一个位置和下一个位置很容易计算出来。但如果有多个颜色没有指定位置，或者前一个或后一个都没有指定位置，那它就变得越来越复杂。
看下面这个示例：
在上图中，只有第三个颜色yellow指定了位置，在渐变线的30%处。为了很好的分发，它把第一个颜色red放置在渐变线的0%处，最后一个颜色black放置在渐变线的100%处。第二个颜色orange放置在渐变线0%至30%的中间位置，第四个颜色red放置在渐变线30%至100%中间位置。
上の図の最初の色と最後の色は、グラデーション ラインの指定された位置に配置され、残りの色は 2 つの間に均等に配分されます。
もちろん、0% から 100% の間であれば、制御は簡単です。しかし、この範囲を超えるケースもあります。たとえば、上の例では、最後の色はグラデーション ラインの 120% にあるため、他の色はこの位置に基づいて均等に分散されます (この例では、デフォルトの開始位置はまだ 0% です)。
ブラウザの動作をさらに向上させたい場合、グラデーション ライン上で色の位置を順番に指定できないのはなぜでしょうか?カラー ポイントの位置が予想された指示に従っているという事実は、非連続的な順序での操作を妨げるものではありません。ただし、後の値が前の値より小さい場合、ブラウザは自動的に対応する修正を行います。例:
最初の色の赤から始めましょう。これはグラデーション ラインの 30% に位置し、2 番目の色のオレンジは 10% にありますが、これはそれは間違っています。上で述べたように、色の停止点は増分です。このとき、ブラウザによって 2 番目の色の位置が修正され、前の色と同じ、グラデーション ラインの 30% の位置に配置されます。次に、3 番目の色の黄色はグラデーション ラインの 60% に配置されますが、その直後の 4 番目の色の青色は 40% であり、ブラウザもその位置を修正して前の色の位置と同じに設定します。
最後に、上の例では、最後の色の青が間違った位置にあるため、ブラウザはその位置を前の色と同じになるように修正します。この場合、それは隣接する色である黄色でもオレンジでもなく、最初の色の赤色まで遡ることになります。したがって、赤と青は両方ともグラデーション ラインの 30% に分布するため、黄色とオレンジ色は見えなくなります。
ツール
記事内のスクリーンショットはすべて、Codepen によって作成されたシンプルなツール から取得したものです。入力ボックスに任意のグラデーション値を入力すると、グラデーション効果だけでなく、グラデーション線の位置、グラデーション角度、グラデーション色も確認できます。
現時点では、このツールにはまださまざまな欠陥や制限があります (JavaScript のコメントを参照) ので、あまり大きな期待はしないでください。もちろん、これをベースにこのツールを改良して、すべての人を助けることもできます。グラデーションについての理解を深めることができます。 。
ツールのアドレス: https://codepen.io/captainbrosset/pen/ByqRMB
(学習ビデオの共有: CSS ビデオ チュートリアル )
以上がCSS3背景で線形グラデーションを実現する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
-
2023-04-26 17:59:18
-
2023-04-26 17:47:48
-
2023-04-26 17:41:42
-
2023-04-26 17:37:05
-
2023-04-26 17:31:25
-
2023-04-26 17:27:32
-
2023-04-25 19:57:58
-
2023-04-25 19:53:11
-
2023-04-25 19:49:11
-
2023-04-25 19:41:54
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
