CSS 線形グラデーションの深い理解 Linear-gradient_html/css_WEB-ITnose

× 目次 [1] 定義 [2] グラデーション ライン [3] カラー スケール [4] グラデーションの繰り返し [5] 複数の背景 [6] アプリケーション シナリオ [7] IE 互換

前の単語

CSS3 の登場により、グラデーション効果はグラフィック ソフトウェアで画像をデザインすることによってのみ実現できますが、スケーラビリティが低く、パフォーマンスに影響を与えます。現在ではCSS3規格に入ったグラデーションで簡単にグラデーション効果を完成させることができます。実はグラデーションは線形グラデーションと放射状グラデーションの2種類に分かれます。今回は線形グラデーションについて紹介します。

定義

グラデーションとは、実際には 2 つ以上の色間の滑らかな遷移です。線形グラデーションは、直線 (グラデーション ラインと呼ばれます) に沿った複数の色の遷移です。グラデーションの実装は、グラデーション ラインとカラー スケールの 2 つの部分で構成されます。グラデーション ラインは、グラデーションが発生する方向を制御するために使用されます。カラー スケールには、グラデーションの色の変化を制御するために使用される色の値と位置が含まれています。ブラウザは、各カラー ストップから次のカラー ストップに色をフェードさせて、滑らかなグラデーションを作成します。複数のカラー ストップを決定することで、マルチカラー グラデーション効果を作成できます。

[注意] safari4-5、IOS3.2-4.3、android2.1-3 は線形グラデーションのみをサポートしており、safari5.1-6、IOS5.1-6.1、android4-4.3 の線形グラデーションを追加する必要があります。 gradients 放射状のグラデーション、および -webkit- を追加する必要があります。IE10+ およびその他の高バージョンのブラウザーは標準の書き込みをサポートします

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

Gradient line

グラデーション ラインは、グラデーション ボックスの中心から開始点の 2 方向に拡張されます。と終点はグラデーションです グラデーションボックスの一角を通る直線と垂直線の交点

gradientの最初のパラメータはグラデーションの線を指定するために使用され、デフォルトは下までです。グラデーションラインの方向を指定するには2つの方法があります

【1】角度を使用します

0degは要素の中心線(y軸と同様)に沿ったボトムアップ方向を表し、正の角度は時計回りの回転

[注意] -webkit-Windows システムの Safari ブラウザなどの古いバージョンのブラウザの場合、0deg は要素の中心線 (x 軸と同様) に沿って左から右への方向を表します。そして、正の角度は反時計回りの回転を表します

So- Webkit-old version ブラウザと標準ブラウザの間の線形勾配の角度関係は

-webkit-浏览器 = 90deg - 标准浏览器

相当于-webkit-linear-gradient(90deg,red,blue) = linear-gradient(0deg,red,blue)

[注意] Webkit カーネルを搭載したブラウザの場合、JavaScript を使用して要素のスタイル。 -webkit- を含むプライベート スタイルと -webkit- を含まない標準スタイルが同時に存在する場合、後者が前者をオーバーライドするとは限りません。したがって、2 つの記述方法が同じ効果を生み出すがパラメータが異なる場合は、ブラウザ認識を使用してそれぞれ異なる状況を記述する必要があります。

【2】キーワードを使用する

to top -> 0degto right -> 90degto bottom -> 180degto left -> -90deg(或270deg)to top left -> -45deg(或315deg)to top right -> 45degto bottom left -> -135deg(或225deg)to bottom right -> 135deg

[注意] ウィンドウシステムの Safari ブラウザは、キーワード 'to' に左へなどの方向を加えたものをサポートしていません。 left などの方向キーワードのみをサポートします。もちろん、左と左の方向はまったく逆です。

カラー スケール

ブラウザにはカラー スケールのデフォルト値がなく、少なくとも 2 つのカラー スケールを設定する必要があります。カラースケールは色と位置で構成されます。 [色] では任意のカラー モードを使用でき、[位置] ではパーセンテージまたは数値を使用できます。

【注意】色の位置はマイナスの値にも設定可能です

[1]は前の色で後ろの位置である必要があります

//正确background-image: linear-gradient(red 0%,blue 100%);//错误background-image: linear-gradient(0% red,100% blue);

[2] 位置は省略可能、ブラウザは最初の色の位置をデフォルトに設定します 0%に設定し、最後の色の位置を100%に設定します

background-image: linear-gradient(red 0%,blue 100%);//等价于上一个background-image: linear-gradient(red,blue);

【3】グラデーションが2色のみで、最初の色の位置が設定されている場合n% に設定すると、2 番目の色の位置が m% に設定されます。次に、ブラウザは 0% ～ n% の範囲を最初の色の単色に設定し、n% ～ m% の範囲を最初の色から 2 番目の色への遷移に設定し、m% ～ 100 の範囲を設定します。 % to 2 番目の色の単色です

background-image: linear-gradient(red 30%,blue 60%);//等价于上一个background-image: linear-gradient(red 0%,red 30%,blue 60%,blue 100%);

【4】グラデーションカラーは位置を指定しない場合は均等に配置されます

background-image: linear-gradient(red,yellow,green,blue);

【5】複数の色が占める場合同じ位置、たとえば a、3 つの色 b と c はすべて位置の n% を占めており、0%-n% が前の色と色の間の色の勾配であり、n%-n% が色の突然変異です。 a の色と c の色の間、n% -100% は、c の色と後者の色の間の色の勾配です。したがって、中央の b は役に立ちません

background-image: linear-gradient(red,yellow 50%,white 50%,black 50%,blue);//等价于上一个background-image: linear-gradient(red,yellow 50%,black 50%,blue);

繰り返しグラデーション

繰り返しグラデーションは、線形グラデーションの繰り返し効果を達成できるため、カラー スケールがグラデーション ラインの方向に無限に繰り返され、いくつかの特殊効果が得られます。

[ 注 ] 繰り返しグラデーションは、最初と最後の色の位置が 0% または 100% ではない場合にのみ有効になります

background-image: -webkit-repeating-linear-gradient(blue 20%,green 50%);background-image: repeating-linear-gradient(blue 20%,green 50%);

ペーパーエフェクト

繰り返しグラデーションを使用すると、水平のペーパーエフェクトを実現できます

れーれー

多背景

　　使用多背景属性，利用带有透明度的渐变颜色给图片添加渐变的透明效果

background: linear-gradient(rgba(255,255,255,0),rgba(255,255,255,0.8)),url('http://sandbox.runjs.cn/uploads/rs/26/ddzmgynp/img1.gif');

应用场景

　　在CSS样式中，渐变相当于背景图片，在理论上可在任何使用url()值的地方采用。比如最常见的background-image、list-style-image以及border-image。但目前为止，仅在背景图片中得到完美的支持

【1】background-image

background-image: -webkit-linear-gradient(pink,lightblue,lightgreen);background-image: linear-gradient(pink,lightblue,lightgreen);

　　[注意]渐变框的大小由background-size决定，默认是padding box

【2】list-style-image

list-style-image: -webkit-linear-gradient(red,blue);list-style-image: linear-gradient(red,blue);font-size: 50px;

　　[注意]渐变框的大小由font-size决定，默认是1em

　　[注意]firefox不支持在list-style-image中设置

【3】border-image

-webkit-border-image:  -webkit-linear-gradient(black,green) 1/10px;    border-image:  linear-gradient(black,green) 1/10px;

　　[注意]渐变框的大小由borer-width决定，safari浏览器始终实现的都是带有fill参数的表现

IE兼容

　　IE9-浏览器并不支持该属性，但可以使用IE准专有的滤镜语法来实现兼容

filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#color', endColorstr='#color');

GradientType代表渐变线方向，0为垂直(默认)，1为水平#color代表色标，格式是#aarrggbb，其中aa为透明度，rrggbb为rgb模式的颜色startColorstr的默认值是#ff0000ff endColorstr的默认值是#ff000000

　　[注意]由于IE滤镜只支持首尾两个位置，且方向只可以为垂直和水平，所以有很大的局限性

filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#ff0000ff', endColorstr='#ffff00ff');