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

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

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




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

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

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

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

引数の指定方法

  • 任意の数値+単位
  • to top
  • to top right
  • to right
  • to bottom right
  • to bottom
  • to bottom left
  • to left
  • to top left
  • %値




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

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

.sample {
 repeating-linear-gradient(to left top, blue, red 20px);
}

上記の例では、 右下から左上に延び、青で始め赤で終わり、20px ごとに繰り返す反復グラデーションとなっています。

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




コメントを残す

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