★CSS3リファレンス

私たちはカジノサイトを独自にレビューしています。当社のリンクを通じてサインアップすると、追加料金なしで当社に手数料が発生する場合があります。

repeating-radial-gradient() …… 繰り返しの円形グラデーションを指定する
Internet Explorer
Google Chrome
Safari
Firefox
Opera
広告



repeating-radial-gradient()関数は、繰り返しの円形グラデーションを指定する際に使用します。

■構文

repeating-radial-gradient(形状とサイズ at 中心位置, 開始色 位置, 途中色 位置, 終了色 位置);

構文は基本的に radial-gradient()関数と同じですが、
repeating-radial-gradient()関数では色の位置を省略せずに指定することで、グラデーションの繰り返し一回分の距離を(その計算結果としてボックス内における繰り返し回数を)制御してやる必要があるでしょう。

■値

グラデーションの中心位置
at に続けて left, center, rightや、top, center, bottom などの位置を表すキーワード、または、0%, 50%, 100% などの%値でグラデーションラインの中心位置を指定。初期値は center
形状
circle(円)、ellipse(楕円)のいずれか。初期値は ellipse
サイズ
グラデーションのサイズを以下のキーワードで指定。初期値は farthest-corner
closest-side …… ボックスの最も近い辺がグラデーションの終了位置となる

farthest-side …… ボックスの最も遠い辺がグラデーションの終了位置となる

closest-corner …… ボックスの最も近いコーナーがグラデーションの終了位置となる

farthest-corner …… ボックスの最も遠いコーナーがグラデーションの終了位置となる(初期値)

開始色, 途中色, 終了色
開始色, 途中色, 終了色を指定。
必要に応じて各色の開始位置を半角スペース区切りで指定することもできます。
例えば、red, yellow, skyblue と指定すれば均一に変化するグラデーションとなりますが、red 50px, yellow 70px, skyblue 100px などと指定すれば各色がどの位置から始まるかを指定できます。

repeating-radial-gradient()関数では、グラデーションの終了色と次の開始色がそのままつなげられます。
そのため、配色によってはグラデーションの境目で色が急激に変化してしまうかもしれません。
グラデーションの境目をなめらかにつなげるには、終了色と開始色を同じ色にするとよいでしょう。

以下の使用例の sample3 と sample4 では、グラデーションの境目をなめらかにつなげるために終了色と開始色を同じ色にしています。

■使用例

CSSソースは外部ファイル(sample.css)に記述

p.sample1, p.sample2, p.sample3, p.sample4 {
width:300px; height:100px;
}
p.sample1 {
background: repeating-radial-gradient(white 50%, gray);
}
p.sample2 {
background: repeating-radial-gradient(ellipse farthest-side, #ff0000 20px, rgba(255,0,0,0) 40px);
}
p.sample3 {
background: repeating-radial-gradient(circle farthest-side, red 5px, orange 10px, yellow 15px, green 20px, blue 25px, indigo 30px, violet 35px, red 40px);
}
p.sample4 {
background: repeating-radial-gradient(circle at top left, pink 0px, white 20px, skyblue 40px, white 60px, pink 80px);
}

HTMLソース

<html>
<head>
<link rel=”stylesheet” href=”sample.css”
type=”text/css”>
</head>
<body>
<p class=”sample1″>円形グラデーション1</p>
<p class=”sample2″>円形グラデーション2</p>
<p class=”sample3″>円形グラデーション3</p>
<p class=”sample4″>円形グラデーション4</p>
</body>
</html>

↓↓↓

ブラウザ上の表示

円形グラデーション1

円形グラデーション2

円形グラデーション3

円形グラデーション4

■ベンダープレフィックスを付けた場合の使用例

CSSソースは外部ファイル(sample.css)に記述

p.prefix_sample1, p.prefix_sample2, p.prefix_sample3, p.prefix_sample4 {
width:300px; height:100px;
}
p.prefix_sample1 {
background: -moz-repeating-radial-gradient(white 50%, gray);
background: -webkit-repeating-radial-gradient(white 50%, gray);
background: -ms-repeating-radial-gradient(white 50%, gray);
}
p.prefix_sample2 {
background: -moz-repeating-radial-gradient(ellipse farthest-side, #ff0000 20px, rgba(255,0,0,0) 40px);
background: -webkit-repeating-radial-gradient(ellipse farthest-side, #ff0000 20px, rgba(255,0,0,0) 40px);
background: -ms-repeating-radial-gradient(ellipse farthest-side, #ff0000 20px, rgba(255,0,0,0) 40px);
}
p.prefix_sample3 {
background: -moz-repeating-radial-gradient(circle farthest-side, red 5px, orange 10px, yellow 15px, green 20px, blue 25px, indigo 30px, violet 35px, red 40px);
background: -webkit-repeating-radial-gradient(circle farthest-side, red 5px, orange 10px, yellow 15px, green 20px, blue 25px, indigo 30px, violet 35px, red 40px);
background: -ms-repeating-radial-gradient(circle farthest-side, red 5px, orange 10px, yellow 15px, green 20px, blue 25px, indigo 30px, violet 35px, red 40px);
}
p.prefix_sample4 {
background: -moz-repeating-radial-gradient(circle at top left, pink 0px, white 20px, skyblue 40px, white 60px, pink 80px);
background: -webkit-repeating-radial-gradient(circle at top left, pink 0px, white 20px, skyblue 40px, white 60px, pink 80px);
background: -ms-repeating-radial-gradient(circle at top left, pink 0px, white 20px, skyblue 40px, white 60px, pink 80px);
}

HTMLソース

<html>
<head>
<link rel=”stylesheet” href=”sample.css”
type=”text/css”>
</head>
<body>
<p class=”prefix_sample1″>円形グラデーション1</p>
<p class=”prefix_sample2″>円形グラデーション2</p>
<p class=”prefix_sample3″>円形グラデーション3</p>
<p class=”prefix_sample4″>円形グラデーション4</p>
</body>
</html>

↓↓↓

ブラウザ上の表示

円形グラデーション1

円形グラデーション2

円形グラデーション3

円形グラデーション4

■関連項目

linear-gradient()関数 …… 線形グラデーションを指定する
radial-gradient()関数 …… 円形グラデーションを指定する
repeating-linear-gradient()関数 …… 繰り返しの線形グラデーションを指定する
repeating-radial-gradient()関数 …… 繰り返しの円形グラデーションを指定する
広告



山田 太郎
テック・リード
山田太郎は、ウェブ開発やグラフィックスプログラミングに10年以上の経験を持つテクノロジーの専門家です。特にHTML5 CanvasやJavaScript、インタラクティブメディアに精通しており、動的なユーザーインターフェースや最先端のウェブアプリケーションの開発に携わってきました。複雑な図形描画や画像操作、リアルタイムグラフィックスに関する知識が豊富で、ウェブ技術の限界を追求する開発者たちにとって頼りになる存在です。知識の共有に情熱を持ち、初心者からプロフェッショナルまで幅広く支援するため、技術フォーラムやブログにも積極的に貢献しています。

ギャンブルガイド もっと見る

カジノファインダー

どのカジノが自分に最適か分からないですか?

サインアップは必要なく、1 分以内に最適なブックメーカーを簡単に見つけることができます。
カジノを探す
Back
質問
Select one of the following options
{"is_any_tile":true}

どのカジノが自分に最適か分からないですか?

Back
Restart
やったー!
これはあなたの選択に基づいた最高のカジノです...
52 users signed up
もっと表示する