関数 repeating-linear-gradient
関数 repeating-linear-gradient
は、繰り返し線形グラデーションを指定します。
これは、例えば 0px から 10px まで
赤から青へのグラデーションといった特定のパターンを定義すると、
そのグラデーションが要素全体に繰り返されることを意味します：
0px から 10px、
10px から 20px、
20px から 30px、というように続きます。
この関数は、背景画像を指定するプロパティ：
background、
background-image
または、ボーダー画像を指定するプロパティ：
border-image、
background-image-source
に適用されます。
構文
セレクター {
background: repeating-linear-gradient([方向], 色1 サイズ1, 色2 サイズ2...);
}
値
| 値 | 説明 |
|---|---|
| 方向 |
角度の単位または
キーワード top、left、right、bottom
あるいはそれらの組み合わせで、グラデーションの方向を指定します。
キーワードの順序は重要ではありません。このパラメータは省略可能です：
指定しない場合、グラデーションは上から下へ進みます。
方向の前には to を付けます。
|
| 角度 | 角度の単位で角度を指定します。 正の値も負の値も可能です。 このパラメータは省略可能です。角度と方向の両方を同時に指定することはできません（あるいは何も指定しないこともできます）。 |
| 色1 | グラデーションの開始色を、色の単位で指定します。 |
| 色2 | グラデーションの終了色を、色の単位で指定します。 |
| サイズ | 特定の色のグラデーションの範囲を、 サイズの単位で指定します。 |
例 . 最もシンプルな例
グラデーションは次のようになります：0px から 20px まで純粋な赤、
20px から 40px まで赤から青へのグラデーション。
そしてこれが上から下へ繰り返されます（繰り返しグラデーションの所以です）：
<div id="elem"></div>
#elem {
background: repeating-linear-gradient(red 20px, blue 40px);
width: 400px;
height: 200px;
}
:
例 . 明確な色
グラデーションは次のようになります：0px から 20px まで純粋な赤、
20px から 40px まで純粋な青（ポイントは、
最初の色が終了する位置で2番目の色が始まることです）。
そしてこれが上から下へ繰り返されます：
<div id="elem"></div>
#elem {
background: repeating-linear-gradient(red 0px, red 20px, blue 20px, blue 40px);
width: 400px;
height: 200px;
}
:
例 . 方向の変更
グラデーションの方向は右から左になります：
<div id="elem"></div>
#elem {
background: repeating-linear-gradient(to left, red 0px, red 20px, blue 20px, blue 40px);
width: 400px;
height: 200px;
}
:
例 . 度単位での方向指定
方向として度単位の角度を指定します：
<div id="elem"></div>
#elem {
background: repeating-linear-gradient(45deg, red 0px, red 2px, white 2px, white 10px);
width: 400px;
height: 200px;
}
:
例 . 負の値
方向を負の値に設定します：
<div id="elem"></div>
#elem {
background: repeating-linear-gradient(-45deg, red 0px, red 2px, white 2px, white 10px);
width: 400px;
height: 200px;
}
:
関連項目
-
関数
repeating-radial-gradient、
これは繰り返し放射グラデーションを作成します。 -
関数
linear-gradient、
これは線形グラデーションを作成します。 -
関数
radial-gradient、
これは放射グラデーションを作成します。
