100 of 313 menu

repeating-radial-gradient 関数

関数 repeating-radial-gradient は反復放射グラデーションを設定します。 これは、例えば 0px から 10px までの 赤から青へのグラデーションパターンを定義すると、 そのグラデーションが要素全体に繰り返されることを意味します: 0px から 10px10px から 20px20px から 30px のように続きます。

この関数は、 radial-gradient と同じパラメータを使用し、違いは反復効果のみです。 受け入れるパラメータについては radial-gradient の説明を参照してください。

構文

セレクタ { background: repeating-radial-gradient([形状 タイプ 位置], 色1 サイズ1, 色2 サイズ2...); }

同心円:

<div id="elem"></div> #elem { background: repeating-radial-gradient(circle at center, red 0px, red 2px, white 2px, white 4px); width: 400px; height: 200px; }

:

同心楕円:

<div id="elem"></div> #elem { background: repeating-radial-gradient(ellipse at center, red 0px, red 4px, white 4px, white 8px); width: 400px; height: 200px; }

:

同心円を中央ではなく端に配置します:

<div id="elem"></div> #elem { background: repeating-radial-gradient(circle at 50px 100px, red 0px, red 2px, white 2px, white 4px); width: 400px; height: 200px; }

:

関連項目

日本語
AfrikaansAzərbaycanБългарскиবাংলাБеларускаяČeštinaDanskDeutschΕλληνικάEnglishEspañolEestiSuomiFrançaisहिन्दीMagyarՀայերենIndonesiaItalianoქართულიҚазақ한국어КыргызчаLietuviųLatviešuМакедонскиMelayuမြန်မာNederlandsNorskPolskiPortuguêsRomânăРусскийසිංහලSlovenčinaSlovenščinaShqipСрпскиSrpskiSvenskaKiswahiliТоҷикӣไทยTürkmenTürkçeЎзбекOʻzbekTiếng Việt
当サイトでは、サイトの動作、分析、パーソナライゼーションのためにクッキーを使用しています。 データ処理はプライバシーポリシーに従って行われます。
すべて受け入れる 設定 拒否