CSS の線形グラデーション プロパティについての深い理解

インターネットの発展に伴い、人々は Web ページの機能に対する要求を高めるだけでなく、ページの外観に対する要求もますます高くなりました。たとえば、ページの色は単色ではなくなりました。さまざまな色の組み合わせを使用してページをより美しくし、より多くのユーザーを引き付けます。この記事では、linear-gradient() 属性、linear-gradient() の角度、linear-gradient() の方向などを含む、CSS の線形グラデーション line-gradient() 関数の使用方法を共有します。困っている友達は参考にしていただければ幸いです。

linear-gradient() の構文:

= Linear-gradient([ [ | to ] ,]? [, ] = [上 | 下] # [ ]?

線形グラデーションの値:次の値は、角度またはキーワードを使用して設定できるグラデーションの方向を表すために使用されます:

: 角度の値を使用して、グラデーションの方向 (または角度) を指定します。 to left: 右から左へのグラデーションを設定します。同等: 270degto right: 左から右へのグラデーションを設定します。同等: 90deg

to top: 下から上へのグラデーションを設定します。以下と同等: 0deg

tobottom: 上から下へのグラデーションを設定します。相当：180度これはデフォルト値であり、空白のままにするのと同じです。

: グラデーションの開始色と終了色の指定に使用されます:
: 色を指定します。
: 長さの値を使用して、開始カラー位置と終了カラー位置を指定します。負の値は許可されません
: 開始色の位置と終了色の位置を指定するには、パーセントを使用します。

注:
線形グラデーションを作成するには、グラデーション効果の開始点と方向 (角度として指定) を設定する必要があります。終了色も定義する必要があります。ストップ カラーは、Gecko に実行させるスムーズなトランジションであり、少なくとも 2 つを指定する必要があります。ただし、より複雑なグラデーション効果を作成するには、より多くの色を指定できます。

linear-gradient() のブラウザ互換性

##linear-gradient() の使用例

HTML 部分:

<div id="box"></div>

CSS 部分:

#box{
    height: 200px;
    width: 300px;
       background: -webkit-linear-gradient(right, red , yellow); /* Safari 5.1 - 6.0 */
       background: -o-linear-gradient( right, red, yellow); /* Opera 11.1 - 12.0 */
       background: -moz-linear-gradient(right, red, yellow); /* Firefox 3.6 - 15 */
       background: linear-gradient(to right, red , yellow); /* 标准的语法（必须放在最后） */
   }

レンダリング:

図に示すように、例は赤から黄色、左から右への線形グラデーション。 書くときは、ブラウザの互換性の問題と文法規則に注意してください。この記事では、CSS の線形グラデーションを主に紹介します。次の記事では、放射状グラデーションについて説明します。好きな友達はフォローしてください！

以上がCSS の線形グラデーション プロパティについての深い理解の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。