repeating-radial-gradient

概要

CSS の repeating-radial-gradient() は radial-gradient() に記された標準的な放射状グラデーションに似ていますが、与えられたカラーストップを（最後のカラーストップと最初のカラーストップの距離の倍数分ずつ両方向に移動させて）自動的に繰り返します。

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

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

構文

Formal grammar: 
  repeating-radial-gradient( [[ circle               || <length> ]                     [ at <position> ]? , | 
                              [ ellipse              || [<length> | <percentage> ]{2}] [ at <position> ]? , |
                              [ [ circle | ellipse ] || <extent-keyword> ]             [ at <position> ]? , |
                                                                                         at <position> ,     <color-stop> [ , <color-stop> ]+ )
                            \------------------------------------------------------------------------------/\--------------------------------/
                                 Definition of the contour, size and position of the ending shape                    List of color stops  
    
              where <extent-keyword> = closest-corner | closest-side | farthest-corner | farthest-side
                    and <color-stop> = <color> [ <percentage> | <length> ]?

Definition of the ending shape
repeating-radial-gradient( circle, … )                /* Synonym of repeating-radial-gradient( circle farthest-corner, …) */
repeating-radial-gradient( ellipse, … )               /* Synonym of repeating-radial-gradient( ellipse farthest-corner, …) */
repeating-radial-gradient( <extent-keyword>, … )      /* It draws concentric circles */
repeating-radial-gradient( circle radius, … )         /* Concentrinc centered circles of the given length. It can't be in %. */
repeating-radial-gradient( ellipse x-axis y-axis, … ) /* The two semi-major axis are given, horizontal, then vertical */

Definition of the position of the shape
repeating-radial-gradient (… at <position>, … )

Definition of the color stops
repeating-radial-gradient (…, <color-stop>)
repeating-radial-gradient (…, <color-stop>, <color-stop>)

値

<position>

background-position や transform-origin と同じ方法で解釈される、<position> です。デフォルトは centerです。

<angle>

開始点からどちらの方向にグラデーションラインを作るのかを決める角度です。デフォルトは 0deg です。

<shape>

グラデーションの形状です。circle （グラデーションの形状は一定半径の円状）か ellipse （軸に沿った楕円) のいずれかです。デフォルトは ellipse です。

<size>

グラデーションのサイズです。利用可能な値は サイズ用の定数 をご覧ください。

<color-stop>

一定箇所に固定される色を表します。この値は <color> 値と、それに続く省略可能な停止位置（架空のグラデーションレイに沿う <percentage> または <length>）でできています。<percentage> の 0% や <length> の 0 はグラデーションの中央を表し、100% は最終的な形状と仮想的なグラデーションレイの交差位置を表します。カラーストップはグラデーションレイ上にあります。

<extent-keyword>

最終的な形状の大きさを指定するキーワードです。利用可能な値は サイズ用の定数 をご覧ください。

サイズ用の定数

以前の草案では 2 つのキーワード contain と cover をそれぞれ標準的な closest-side、farthest-corner の別名として定義していました。一部の実装は古い 2 つの変数を外したので、標準的なキーワードだけを使ってください。

例

放射状グラデーションは軸に対して適用されます。軸の各終点に対してひとつの半径が定義されます。これは二つの "円" が生成され、それぞれの円の中心が point で定義され、半径が radius length で定義されるものとしてイメージできます。グラデーションは内側の円の円周から外側の円の円周に向かって外向きに生成されます。

background: repeating-radial-gradient(black, black 5px, white 5px, white 10px);

background: repeating-radial-gradient(ellipse farthest-corner, red, black 5%, blue 5%, green 10%);

ブラウザ実装状況

関連情報

• CSS グラデーションの利用、 repeating-linear-gradient 、 radial-gradient()
• WebKit の原案: https://webkit.org/blog/175/introducing-css-gradients/
• MSDN library, gradient filter (reference doc)