CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSSで放射状グラデーションの形状を設定する方法

CSSで放射状グラデーションの形状を設定するには、radial-gradient()関数を使用します。この関数は、背景画像として放射状グラデーションを指定するためのもので、第1引数に希望する形状を指定します。

指定できる形状は「ellipse」（楕円）と「circle」（円）の2種類です。以下のように記述します。

background-image: radial-gradient(ellipse, rgb(217, 255, 0), rgb(255, 0, 0), rgb(14, 239, 255));

上記の例では、楕円形のグラデーションが黄緑色から赤、そして水色へと変化していきます。色はカンマで区切って複数指定でき、左から順に中心から外側へと遷移します。

サンプルコード

以下は、CSSを使って放射状グラデーションの形状を設定する完全なコード例です。

<!DOCTYPE html>
<html>
<head>
<style>
body {
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
#radial {
    height: 200px;
    width: 300px;
    background-image: radial-gradient(ellipse, rgb(217, 255, 0), rgb(255, 0, 0), rgb(14, 239, 255));
}
</style>
</head>
<body>
<h1>Radial Gradient Shape Example</h1>
<div id="radial"></div>
</body>
</html>

実行結果

上記のコードを実行すると、300×200pxの要素内に楕円形の放射状グラデーションが表示されます。中心部分は黄緑色（rgb(217, 255, 0)）から始まり、中間で赤（rgb(255, 0, 0)）、外周に向かって水色（rgb(14, 239, 255)）へと滑らかに変化します。

形状を円形にしたい場合は、「ellipse」を「circle」に置き換えるだけで、正円のグラデーションに変更できます。また、サイズや位置を細かく制御したい場合は、「closest-side」「farthest-corner」などのキーワードや、具体的な寸法値を組み合わせて指定することも可能です。

  1. CSSで放射状グラデーションのサイズを指定する方法

    CSSで放射状グラデーションのサイズを制御するには、radial-gradient() 関数を使用します。この関数は、背景画像として放射状グラデーションを定義するもので、第1引数にサイズ（形状と大きさ）を、その後に位置やカラーストップを指定します。基本的な書き方以下の例のように、関数の最初のパラメータとして希望するサイズを設定します。background-image: radial-gradient(40% 50px at center, rgb(30, 255, 0), rgb(0, 195, 255), rgb(128, 0, 32));サイズに指定できる値グラデーションのサイズには、以下

  2. CSSでグラデーションのカラーストップ位置を設定する方法

    CSSのグラデーションでは、各色が切り替わる位置(カラーストップ)をパーセンテージまたは絶対的な長さで指定できます。これにより、色の遷移を均等ではなく自由にコントロールすることが可能です。カラーストップの基本例えば、linear-gradient()関数でカラーストップの位置を指定する場合、以下のように記述します。background-image: linear-gradient( rgb(61, 255, 2) 40%, rgb(0, 174, 255) 80%, rgb(255, 29, 29) 20% );このように位置を明示的に指定すると、各色がその地点で完全に