構文 | 説明 | |
---|---|---|
radial-gradient | ([ [ 《shape【最終形状】》 || 《size【形状サイズ】》 ] [ at 《position【位置】》 ] ?,| at 《position【位置】》, ] ?color-stop【カラーストップ】》《 [ , 《color-stop【カラーストップ】》 ] +) | 最終形状・形状サイズ 始点の色 終点(中間点)の色 |
repeating-radial-gradient | ||
戻り値 | <gradient【グラデーション画像】> | background【背景】等に指定 |
《shape【最終形状】》 | circle【円】 | ellipse【楕円】 (省略:《size【形状サイズ】》が《length【長さ】》の場合、circle【円】 その他の場合、ellipse【楕円】) | |
《size【形状サイズ】》 | closest-corner【近い角】 | closest-side【近い辺】 | farthest-corner【遠い角】 | farthest-side【遠い辺】 | 《length【長さ】》 | [ 《length【長さ】》 | 《percentage【パーセンテージ】》] {2} | circle【円】の場合 ellipse【楕円】の場合 |
《color-stop【カラーストップ】》 | 《color【色】》[ 《percentage【パーセンテージ】》 | 《length【長さ】》 ] ? | 色 位置 |
<style>
.ex1 { text-align: center; color: black; padding: 100px 10px; }
.exA1 { background: radial-gradient(circle, white, blue); }
.exA2 { background: radial-gradient(ellipse, white, blue); }
.exB1 { background: radial-gradient(circle 50px, white, blue); }
.exB2 { background: radial-gradient(ellipse 100px 50px, white, blue); }
.exC1 { background: radial-gradient(circle closest-side, white, blue); }
.exC2 { background: radial-gradient(ellipse closest-side, white, blue); }
.exD1 { background: radial-gradient(circle at top left, white, blue); }
.exD2 { background: radial-gradient(ellipse at bottom right, white, blue); }
.exE1 { background: radial-gradient(circle closest-side, white, blue 20%); }
.exE2 { background: radial-gradient(ellipse closest-side, white, blue 20%); }
.exF1 { background: radial-gradient(circle, white, blue, yellow); }
.exF2 { background: radial-gradient(ellipse, white, blue, yellow); }
.exG1 { background: radial-gradient(circle, red, orange, yellow, green, blue, indigo, violet); }
.exG2 { background: radial-gradient(ellipse, red, orange, yellow, green, blue, indigo, violet); }
</style>
<p class="ex1 exA1">(exA1) radial-gradient(circle, white, blue)</p>
<p class="ex1 exA2">(exA2) radial-gradient(ellipse, white, blue)</p>
<p class="ex1 exB1">(exB1) radial-gradient(circle 50px, white, blue)</p>
<p class="ex1 exB2">(exB2) radial-gradient(ellipse 100px 50px, white, blue)</p>
<p class="ex1 exC1">(exC1) radial-gradient(circle closest-side, white, blue)</p>
<p class="ex1 exC2">(exC2) radial-gradient(ellipse closest-side, white, blue)</p>
<p class="ex1 exD1">(exD1) radial-gradient(circle at top left, white, blue)</p>
<p class="ex1 exD2">(exD2) radial-gradient(ellipse at bottom right, white, blue)</p>
<p class="ex1 exE1">(exE1) radial-gradient(circle closest-side, white, blue 20%)</p>
<p class="ex1 exE2">(exE2) radial-gradient(ellipse closest-side, white, blue 20%)</p>
<p class="ex1 exF1">(exF1) radial-gradient(circle, white, blue, yellow)</p>
<p class="ex1 exF2">(exF2) radial-gradient(ellipse, white, blue, yellow)</p>
<p class="ex1 exG1">(exG1) radial-gradient(circle, red, orange, yellow, green, blue, indigo, violet)</p>
<p class="ex1 exG2">(exG2) radial-gradient(ellipse, red, orange, yellow, green, blue, indigo, violet)</p>
(exA1) radial-gradient(circle, white, blue)
(exA2) radial-gradient(ellipse, white, blue)
(exB1) radial-gradient(circle 50px, white, blue)
(exB2) radial-gradient(ellipse 100px 50px, white, blue)
(exC1) radial-gradient(circle closest-side, white, blue)
(exC2) radial-gradient(ellipse closest-side, white, blue)
(exD1) radial-gradient(circle at top left, white, blue)
(exD2) radial-gradient(ellipse at bottom right, white, blue)
(exE1) radial-gradient(circle closest-side, white, blue 20%)
(exE2) radial-gradient(ellipse closest-side, white, blue 20%)
(exF1) radial-gradient(circle, white, blue, yellow)
(exF2) radial-gradient(ellipse, white, blue, yellow)
(exG1) radial-gradient(circle, red, orange, yellow, green, blue, indigo, violet)
(exG2) radial-gradient(ellipse, red, orange, yellow, green, blue, indigo, violet)
<style>
.ex2 { text-align: center; color: black; padding: 100px 10px; }
.exRA1 { background: repeating-radial-gradient(circle, white, blue 20%); }
.exRA2 { background: repeating-radial-gradient(ellipse, white, blue 20%); }
.exRB1 { background: repeating-radial-gradient(circle 50px, white, blue); }
.exRB2 { background: repeating-radial-gradient(ellipse 100px 50px, white, blue); }
.exRC1 { background: repeating-radial-gradient(circle closest-side, white, blue); }
.exRC2 { background: repeating-radial-gradient(ellipse closest-side, white, blue 20%); }
.exRD1 { background: repeating-radial-gradient(circle at top left, white, blue 20%); }
.exRD2 { background: repeating-radial-gradient(ellipse at bottom right, white, blue 20%); }
.exRE1 { background: repeating-radial-gradient(circle closest-side, white, blue 20%); }
.exRE2 { background: repeating-radial-gradient(ellipse closest-side, white, blue 20%); }
.exRF1 { background: repeating-radial-gradient(circle, white, blue, yellow 20%); }
.exRF2 { background: repeating-radial-gradient(ellipse, white, blue, yellow 20%); }
.exRG1 { background: repeating-radial-gradient(circle, red, orange, yellow, green, blue, indigo, violet 20%); }
.exRG2 { background: repeating-radial-gradient(ellipse, red, orange, yellow, green, blue, indigo, violet 20%); }
</style>
<p class="ex2 exRA1">(exRA1) repeating-radial-gradient(circle, white, blue 20%)</p>
<p class="ex2 exRA2">(exRA2) repeating-radial-gradient(ellipse, white, blue 20%)</p>
<p class="ex2 exRB1">(exRB1) repeating-radial-gradient(circle 50px, white, blue)</p>
<p class="ex2 exRB2">(exRB2) repeating-radial-gradient(ellipse 100px 50px, white, blue)</p>
<p class="ex2 exRC1">(exRC1) repeating-radial-gradient(circle closest-side, white, blue)</p>
<p class="ex2 exRC2">(exRC2) repeating-radial-gradient(ellipse closest-side, white, blue 20%)</p>
<p class="ex2 exRD1">(exRD1) repeating-radial-gradient(circle at top left, white, blue 20%)</p>
<p class="ex2 exRD2">(exRD2) repeating-radial-gradient(ellipse at bottom right, white, blue 20%)</p>
<p class="ex2 exRE1">(exRE1) repeating-radial-gradient(circle closest-side, white, blue 20%)</p>
<p class="ex2 exRE2">(exRE2) repeating-radial-gradient(ellipse closest-side, white, blue 20%)</p>
<p class="ex2 exRF1">(exRF1) repeating-radial-gradient(circle, white, blue, yellow 20%)</p>
<p class="ex2 exRF2">(exRF2) repeating-radial-gradient(ellipse, white, blue, yellow 20%)</p>
<p class="ex2 exRG1">(exRG1) repeating-radial-gradient(circle, red, orange, yellow, green, blue, indigo, violet 20%)</p>
<p class="ex2 exRG2">(exRG2) repeating-radial-gradient(ellipse, red, orange, yellow, green, blue, indigo, violet 20%)</p>
(exRA1) repeating-radial-gradient(circle, white, blue 20%)
(exRA2) repeating-radial-gradient(ellipse, white, blue 20%)
(exRB1) repeating-radial-gradient(circle 50px, white, blue)
(exRB2) repeating-radial-gradient(ellipse 100px 50px, white, blue)
(exRC1) repeating-radial-gradient(circle closest-side, white, blue)
(exRC2) repeating-radial-gradient(ellipse closest-side, white, blue 20%)
(exRD1) repeating-radial-gradient(circle at top left, white, blue 20%)
(exRD2) repeating-radial-gradient(ellipse at bottom right, white, blue 20%)
(exRE1) repeating-radial-gradient(circle closest-side, white, blue 20%)
(exRE2) repeating-radial-gradient(ellipse closest-side, white, blue 20%)
(exRF1) repeating-radial-gradient(circle, white, blue, yellow 20%)
(exRF2) repeating-radial-gradient(ellipse, white, blue, yellow 20%)
(exRG1) repeating-radial-gradient(circle, red, orange, yellow, green, blue, indigo, violet 20%)
(exRG2) repeating-radial-gradient(ellipse, red, orange, yellow, green, blue, indigo, violet 20%)