Close
repeating-linear-gradient()関数は、繰り返しの線形グラデーションを指定する際に使用します。
構文は基本的に linear-gradient()関数と同じですが、
repeating-linear-gradient()関数では色の位置を省略せずに指定することで、グラデーションの繰り返し一回分の距離を（その計算結果としてボックス内における繰り返し回数を）制御してやる必要があるでしょう。
repeating-linear-gradient()関数では、グラデーションの終了色と次の開始色がそのままつなげられます。
そのため、配色によってはグラデーションの境目で色が急激に変化してしまうかもしれません。
グラデーションの境目をなめらかにつなげるには、終了色と開始色を同じ色にするとよいでしょう。
以下の使用例の sample3 と sample4 では、グラデーションの境目をなめらかにつなげるために終了色と開始色を同じ色にしています。
p.sample1, p.sample2, p.sample3, p.sample4 {
width:300px; height:100px;
}
p.sample1 {
background: repeating-linear-gradient(white 50%, gray);
}
p.sample2 {
background: repeating-linear-gradient(90deg, #ff0000 20px, rgba(255,0,0,0) 40px);
}
p.sample3 {
background: repeating-linear-gradient(135deg, red 5px, orange 10px, yellow 15px, green 20px, blue 25px, indigo 30px, violet 35px, red 40px);
}
p.sample4 {
background: repeating-linear-gradient(135deg, pink 0px, white 20px, skyblue 40px, white 60px, pink 80px);
}
<html>
<head>
<link rel=”stylesheet” href=”sample.css”
type=”text/css”>
</head>
<body>
<p class=”sample1″>繰り返しの線形グラデーション１</p>
<p class=”sample2″>繰り返しの線形グラデーション２</p>
<p class=”sample3″>繰り返しの線形グラデーション３</p>
<p class=”sample4″>繰り返しの線形グラデーション４</p>
</body>
</html>
繰り返しの線形グラデーション１
繰り返しの線形グラデーション２
繰り返しの線形グラデーション３
繰り返しの線形グラデーション４
p.prefix_sample1, p.prefix_sample2, p.prefix_sample3, p.prefix_sample4 {
width:300px; height:100px;
}
p.prefix_sample1 {
background: -moz-repeating-linear-gradient(white 50%, gray);
background: -webkit-repeating-linear-gradient(white 50%, gray);
background: -ms-repeating-linear-gradient(white 50%, gray);
}
p.prefix_sample2 {
background: -moz-repeating-linear-gradient(90deg, #ff0000 20px, rgba(255,0,0,0) 40px);
background: -webkit-repeating-linear-gradient(90deg, #ff0000 20px, rgba(255,0,0,0) 40px);
background: -ms-repeating-linear-gradient(90deg, #ff0000 20px, rgba(255,0,0,0) 40px);
}
p.prefix_sample3 {
background: -moz-repeating-linear-gradient(135deg, red 5px, orange 10px, yellow 15px, green 20px, blue 25px, indigo 30px, violet 35px, red 40px);
background: -webkit-repeating-linear-gradient(135deg, red 5px, orange 10px, yellow 15px, green 20px, blue 25px, indigo 30px, violet 35px, red 40px);
background: -ms-repeating-linear-gradient(135deg, red 5px, orange 10px, yellow 15px, green 20px, blue 25px, indigo 30px, violet 35px, red 40px);
}
p.prefix_sample4 {
background: -moz-repeating-linear-gradient(135deg, pink 0px, white 20px, skyblue 40px, white 60px, pink 80px);
background: -webkit-repeating-linear-gradient(135deg, pink 0px, white 20px, skyblue 40px, white 60px, pink 80px);
background: -ms-repeating-linear-gradient(135deg, pink 0px, white 20px, skyblue 40px, white 60px, pink 80px);
}
<html>
<head>
<link rel=”stylesheet” href=”sample.css”
type=”text/css”>
</head>
<body>
<p class=”prefix_sample1″>繰り返しの線形グラデーション１</p>
<p class=”prefix_sample2″>繰り返しの線形グラデーション２</p>
<p class=”prefix_sample3″>繰り返しの線形グラデーション３</p>
<p class=”prefix_sample4″>繰り返しの線形グラデーション４</p>
</body>
</html>
繰り返しの線形グラデーション１
繰り返しの線形グラデーション２
繰り返しの線形グラデーション３
繰り返しの線形グラデーション４
どのカジノが自分に最適か分からないですか?
