repeating-linear-gradient

概要

CSS の repeating-linear-gradient 関数は、グラデーションの繰り返しによる <image> を作ります。linear-gradient に書かれているような基本的な線形グラデーションと似た動作をし、同じ引数をとりますが、最初と最後のカラーストップ間の距離の倍数分だけカラーストップを移動させながら、自動的にカラーストップを両方向に無限に繰り返します。

この結果、グラデーションの最初と最後の色は常に隣り合わせになります。二つが同じ色でなければ、はっきりとした変わり目ができるでしょう。

他のグラデーションと同じく、CSS グラデーションの繰り返しも CSS の <color> ではなく、固有のサイズを持たない画像です。これは、画像本来のサイズや、優先されるサイズを持たないということです（アスペクト比についても同様です）。実際のサイズは、グラデーションの用いられる要素にマッチしたものになるでしょう。

Mozilla は現在、CSS グラデーションを background-image および background プロパティの値としてのみサポートしています。画像の URL の代わりに、グラデーション値を指定します。

構文

Formal grammar: repeating-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> ]?

repeating-linear-gradient( 45deg, blue, red );           /* 45deg 方向に軸を延ばし、青で始め赤で終わるグラデーションの繰り返し */
repeating-linear-gradient( to left top, blue, red);      /* 右下から左上に延び、青で始め赤で終わるグラデーションの繰り返し */

repeating-linear-gradient( 0deg, blue, green 40%, red ); /* 下から上に延び、青で始め、
                                                            40% から緑になり、赤で終わるグラデーションの繰り返し */

値

<side-or-corner>

to に続けて指定し、グラデーションラインの終点を表します。グラデーションボックスの横の辺を表すキーワード left か right と、縦の辺を表す top か bottom の片方、または両方を記述します。キーワードの順番は任意です。
値 to top、to bottom、to left、to right はそれぞれ、角度 0deg、180deg、270deg、90deg に変換されます。
to top left のように 2 つの方向を与えると、その方向にあるボックスのコーナーを指し、始点とコーナーを結ぶ直線がグラデーションラインと直交し、始点とコーナーが同じ象限になるような角度に変換されます。こうして、<color-stop> に書かれた色が正確にコーナーに使われます。これは "マジックコーナー" プロパティと呼ばれることがあります。グラデーションラインの始点と終点は、グラデーションボックスの中心に対して点対称な位置にあります。
<side-or-corner> も <angle> も指定しない場合、デフォルト値 to bottom が使われます。

<angle>

グラデーションの方向を示す角度。<angle> をご覧ください。
<side-or-corner> も <angle> も指定しない場合、デフォルト値 to bottom が使われます。

<color-stop>

この値は <color> 値と、それに続く省略可能な停止位置（0% から 100% の割合またはグラデーションの軸に沿った <length>）からなります。
CSS グラデーションのカラーストップの描画は、SVG グラデーションのカラーストップと同じ規則に従います。

例

background: repeating-linear-gradient(to bottom right, red, red 5px, white 5px, white 10px);

仕様

ブラウザ実装状況

^[1] Internet Explorer 5.5 から 9.0 はプロプライエタリな filter: progid:DXImageTransform.Microsoft.Gradient() 関数をサポートしています。

^[2] WebKit は 528 からレガシーな -webkit-gradient(linear,…) 関数をサポートしています。WebKit 534.16 時点で、標準的なグラデーションの構文もサポートしています。Gecko と違って、レガシーな WebKit では  -webkit-linear-gradient() で位置と角度の両方を指定することはできません。カラーストップを補うと、同じ効果を実現できます。

^[3] Gecko、Opera と Webkit は <angle> を上ではなく右から開始します。したがって 0deg は右方向を指す指示になります。これは最新の仕様とは異なります。最新の仕様では、0deg は上方向を指す指示になります。

^[4] Firefox 3.6 と Opera 11.10 は、開始コーナーまたはサイドが to キーワードなしで示され、事実上 from の位置であるとみなされる、初期の構文をプレフィックス版として実装しました。to 構文は Firefox 10 と Opera 11.60 で追加されましたが、非推奨の構文は初め、取り除かれませんでした。この二つの書き換えはわずかです:

-moz-repeating-linear-gradient(to top left, blue, red);

これは次と同じです:

-moz-repeating-linear-gradient(bottom right, blue, red);

to なしのレガシーな構文は、プレフィックスが取り除かれたときになくされる予定です。

関連情報

• CSS グラデーションの利用、 radial-gradient(), linear-gradient(), repeating-radial-gradient();
• この値を使えるプロパティ: background-image 、 background