構文 | 説明 | |
---|---|---|
linear-gradient (終点位置以降は終点の色) | ([ [ 《angle【角度】》 | to 《side-or-corner【辺・角】》 ] ,] ?《color-stop【カラーストップ】》 [ , 《color-stop【カラーストップ】》] +) | 方向 (角度指定) 方向 (辺 または 角 指定) 始点の色(と位置) 終点(中間点)の色(と位置) |
repeating-linear-gradient (終点位置までをリピート) | ||
戻り値 | 《gradient【グラデーション画像】》 | background【背景】等に指定 |
《side-or-corner【辺・角】》 | [ left【左】 | right【右】 ] || [ top【上】 | bottom【下】 ] | 始点・中間点・終点 となる辺 または 角 (2つ指定すれば角) |
《color-stop【カラーストップ】》 | 《color【色】》[ 《percentage【パーセンテージ】》 | 《length【長さ】》 ] ? | 色 位置 |
<style>
.exA1 { background: linear-gradient(white, blue);
text-align:center; color:white; padding:10px; }
.exA2 { background: linear-gradient(to top, white, blue);
text-align:center; color:white; padding:10px; }
.exA3 { background: linear-gradient(white, blue, white);
text-align:center; color:white; padding:10px; }
.exB1 { background: linear-gradient(to right, white, blue);
text-align:center; color:white; padding:10px; }
.exB2 { background: linear-gradient(to left, white, blue);
text-align:center; color:white; padding:10px; }
.exB3 { background: linear-gradient(to right, white, blue, white);
text-align:center; color:white; padding:10px; }
.exB4 { background: linear-gradient(to right, white, blue 20%);
text-align:center; color:white; padding:10px; }
.exC1 { background: linear-gradient(to right top, white, blue);
text-align:center; color:white; padding:150px 10px; }
.exC2 { background: linear-gradient(to left top, white, blue);
text-align:center; color:white; padding:150px 10px; }
.exC3 { background: linear-gradient(to right top, white, blue, white);
text-align:center; color:white; padding:150px 10px; }
.exC4 { background: linear-gradient(to left top, white, blue, white);
text-align:center; color:white; padding:150px 10px; }
.exD1 { background: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);
text-align:center; color:white; padding:20px 10px; }
</style>
<p class="exA1">(exA1) linear-gradient(white, blue)【上 → 下】</p>
<p class="exA2">(exA2) linear-gradient(to top, white, blue)【下 → 上】</p>
<p class="exA3">(exA3) linear-gradient(white, blue, white)【上 → 下 (中間点)】</p>
<p class="exB1">(exB1) linear-gradient(to right, white, blue)【左 → 右】</p>
<p class="exB2">(exB2) linear-gradient(to left, white, blue)【右 → 左】</p>
<p class="exB3">(exB3) linear-gradient(to right, white, blue, white)【左 → 右 (中間点)】</p>
<p class="exB4">(exB4) linear-gradient(to right, white, blue 20%)【左 → 右 (終点は20%の位置 以降は同色)】</p>
<p class="exC1">(exC1) linear-gradient(to right top, white, blue)【左下 → 右上】</p>
<p class="exC2">(exC2) linear-gradient(to left top, white, blue)【右下 → 左上】</p>
<p class="exC3">(exC3) linear-gradient(to right top, white, blue)【左下 → 右上 (中間点)】</p>
<p class="exC4">(exC4) linear-gradient(to left top, white, blue)【右下 → 左上 (中間点)】</p>
<p class="exD1">(exD1) linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet)【左 → 右 (7色)】</p>
(exA1) linear-gradient(white, blue)【上 → 下】
(exA2) linear-gradient(to top, white, blue)【下 → 上】
(exA3) linear-gradient(white, blue, white)【上 → 下 (中間点)】
(exB1) linear-gradient(to right, white, blue)【左 → 右】
(exB2) linear-gradient(to left, white, blue)【右 → 左】
(exB3) linear-gradient(to right, white, blue, white)【左 → 右 (中間点)】
(exB4) linear-gradient(to right, white, blue 20%)【左 → 右 (終点は20%の位置 以降は同色)】
(exC1) linear-gradient(to right top, white, blue)【左下 → 右上】
(exC2) linear-gradient(to left top, white, blue)【右下 → 左上】
(exC3) linear-gradient(to right top, white, blue)【左下 → 右上 (中間点)】
(exC4) linear-gradient(to left top, white, blue)【右下 → 左上 (中間点)】
(exD1) linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet)【左 → 右 (7色)】
<style>
.exRA1 { background: repeating-linear-gradient(white, blue 50%);
text-align:center; color:white; padding:10px; }
.exRA2 { background: repeating-linear-gradient(to top, white, blue 50%);
text-align:center; color:white; padding:10px; }
.exRA3 { background: repeating-linear-gradient(white, blue 25%, white 50%);
text-align:center; color:white; padding:10px; }
.exRB1 { background: repeating-linear-gradient(to right, white, blue 20%);
text-align:center; color:white; padding:10px; }
.exRB2 { background: repeating-linear-gradient(to left, white, blue 20%);
text-align:center; color:white; padding:10px; }
.exRB3 { background: repeating-linear-gradient(to right, white, blue 10%);
text-align:center; color:white; padding:10px; }
.exRB4 { background: repeating-linear-gradient(to right, white, blue 10%, white 20%);
text-align:center; color:white; padding:10px; }
.exRC1 { background: repeating-linear-gradient(45deg, white, blue 20%);
text-align:center; color:white; padding:150px 10px; }
.exRC2 { background: repeating-linear-gradient(-45deg, white, blue 20%);
text-align:center; color:white; padding:150px 10px; }
.exRC3 { background: repeating-linear-gradient(45deg, white, blue 10%, white 20%);
text-align:center; color:white; padding:150px 10px; }
.exRC4 { background: repeating-linear-gradient(-45deg, white, blue 10%, white 20%);
text-align:center; color:white; padding:150px 10px; }
.exRD1 { background: repeating-linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet 20%);
text-align:center; color:white; padding:20px 10px; }
</style>
<p class="exRA1">(exRA1) repeating-linear-gradient(white, blue 50%)【上 → 下】</p>
<p class="exRA2">(exRA2) repeating-linear-gradient(to top, white, blue 50%)【下 → 上】</p>
<p class="exRA3">(exRA3) repeating-linear-gradient(white, blue 25%, white 50%)【上 → 下 (中間点)】</p>
<p class="exRB1">(exRB1) repeating-linear-gradient(to right, white, blue 20%)【左 → 右 (20%)】</p>
<p class="exRB2">(exRB2) repeating-linear-gradient(to left, white, blue 20%)【右 → 左 (20%)】</p>
<p class="exRB3">(exRB3) repeating-linear-gradient(to right, white, blue 10%)【左 → 右 (10%)】</p>
<p class="exRB4">(exRB4) repeating-linear-gradient(to right, white, blue 10%, white 20%)【左 → 右 (中間点 10% 20%)】</p>
<p class="exRC1">(exRC1) repeating-linear-gradient(deg45, white, blue 20%)【45度 20%】</p>
<p class="exRC2">(exRC2) repeating-linear-gradient(-45deg, white, blue 20%)【-45度 20%】</p>
<p class="exRC3">(exRC3) repeating-linear-gradient(deg45, white, blue 20%)【45度 10% 20%】</p>
<p class="exRC4">(exRC4) repeating-linear-gradient(-45deg, white, blue 20%)【-45度 10% 20%】</p>
<p class="exRD1">(exRD1) repeating-linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet 20%)【左 → 右 (7色 20%)】</p>
(exRA1) repeating-linear-gradient(white, blue 50%)【上 → 下】
(exRA2) repeating-linear-gradient(to top, white, blue 50%)【下 → 上】
(exRA3) repeating-linear-gradient(white, blue 25%, white 50%)【上 → 下 (中間点)】
(exRB1) repeating-linear-gradient(to right, white, blue 20%)【左 → 右 (20%)】
(exRB2) repeating-linear-gradient(to left, white, blue 20%)【右 → 左 (20%)】
(exRB3) repeating-linear-gradient(to right, white, blue 10%)【左 → 右 (10%)】
(exRB4) repeating-linear-gradient(to right, white, blue 10%, white 20%)【左 → 右 (中間点 10% 20%)】
(exRC1) repeating-linear-gradient(deg45, white, blue 20%)【45度 20%】
(exRC2) repeating-linear-gradient(-45deg, white, blue 20%)【-45度 20%】
(exRC3) repeating-linear-gradient(deg45, white, blue 20%)【45度 10% 20%】
(exRC4) repeating-linear-gradient(-45deg, white, blue 20%)【-45度 10% 20%】
(exRD1) repeating-linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet 20%)【左 → 右 (7色 20%)】