2021/2/18 HTML&CSS辞典をオープンしました! コンテンツは随時更新します!

[CSS] repeating-radial-gradient()関数で円形のグラデーションを繰り返して表示しよう!

repeating-radial-gradient()関数の評価
頻出度
(5.0)
重要度
(5.0)
総合評価
(5.0)




1.repeating-radial-gradient()関数とは?

repeating-radial-gradient()関数は画像のデータ型で値を指定できるプロパティにおいて、繰り返される円形のグラデーションを表示します。

引数の指定方法は以下の通りです。

{ プロパティ: repeating-radial-gradient(引数); }

引数の指定方法

  • circle
  • ellipse
  • closest-side
  • farthest-side
  • closest-corner
  • farthest-corner
  • 任意の数値+単位
  • %値
  • at top
  • at top right
  • at right
  • at bottom right
  • at bottom
  • at bottom left
  • at left
  • at top left
  • at center




2.repeating-radial-gradient()関数の使い方

それではrepeating-radial-gradient()関数の使い方をみていきましょう。

.sample {
 repeating-radial-gradient(circle at center, red 0, blue, green 30px);
}

上記の例では、 コンテナーの中央からのグラデーションで、赤で始まり、青に変化し、緑で終わり、それぞれ 30px ごとに色が繰り返されるものとなっています。

他にも値を設定できるのでいろいろと試してみることをお勧めします!




コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です