Join MDN and developers like you at Mozilla's View Source conference, 12-14 September in Berlin, Germany. Learn more at https://viewsourceconf.org

概要

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-positiontransform-origin と同じ方法で解釈される、<position> です。デフォルトは centerです。
<angle>
開始点からどちらの方向にグラデーションラインを作るのかを決める角度です。デフォルトは 0deg です。
<shape>
グラデーションの形状です。circle (グラデーションの形状は一定半径の円状)か ellipse (軸に沿った楕円) のいずれかです。デフォルトは ellipse です。
<size>
グラデーションのサイズです。利用可能な値は サイズ用の定数 をご覧ください。
<color-stop>
一定箇所に固定される色を表します。この値は <color> 値と、それに続く省略可能な停止位置(架空のグラデーションレイに沿う <percentage> または <length>)でできています。<percentage> の 0% や <length> の 0 はグラデーションの中央を表し、100% は最終的な形状と仮想的なグラデーションレイの交差位置を表します。カラーストップはグラデーションレイ上にあります。
<extent-keyword>
最終的な形状の大きさを指定するキーワードです。利用可能な値は サイズ用の定数 をご覧ください。

サイズ用の定数

定数 説明
closest-side グラデーションの形状は、その中心から最も近いグラデーションボックスの辺に(circle の場合)、またはその中心から最も近い縦と横の辺に(ellipse の場合)内接します。グラデーションボックスとは、グラデーションが描かれるオブジェクトの実際のサイズです。
closest-corner グラデーションの形状は、その中心から最も近いグラデーションボックスの頂点に接します。
farthest-side 形状がその中心から最も遠い辺(または縦と横の辺)に接することを除いて closest-side と同じです。
farthest-corner グラデーションの形状は、その中心から最も遠いグラデーションボックスの頂点に接します。
contain closest-side の別名です。
cover farthest-corner の別名です。

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

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

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

ブラウザ実装状況

機能 Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
基本サポート 10 -webkit 3.6 (1.9.2) -moz
16 (16)
10 12 -o
12.5
5.1 -webkit
機能 Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
基本サポート ? ? ? ? ?

関連情報

ドキュメントのタグと貢献者

 このページの貢献者: Sebastianz, Simplexible, Prinz_Rana, mrstork, ethertank, sosleepy
 最終更新者: Sebastianz,