備忘録的プログラミングリファレンス

radical-gradient()関数

 radical-gradient()関数は、2色以上の放射状のグラデーションを生成する関数です。放射状の中心点は指定できます。<gradient>データ型であり、<image>データ型の派生です。

 radical-gradient()関数は<image>データ型に属します。そのために<image>データ型が使用できるプロパティのみで使えます。

背景色を、赤色を0%~30%の範囲まで、黄色を70%~100%の範囲にし、30%~70%は赤色から黄色のグラデーション(Exampleを参照
background-image: radical-gradient(red 0% 30%, yellow 70% 100%);

 線形グラデーションを表示するにはlinear-gradient()関数を利用します。

ページ内 Index

構文(Syntax)

CSS

radical-gradient(circle at center, color end1, color end2,...)

DOM ( JavaScript )

 JavaScript では、HTMLElement.style に 。background: を利用した値を指定することで表示できるようです。

 例えば以下のように指定します。

background:を使用
HTMLElement.style = "background:radical-gradient(yellow 0% 30%, red 70% 100%)";

Example

 radical-gradient()関数の例です。この関数は、<image>データ型が使用できるプロパティのみで使えます。 関数による返り値がプロパティの値になります。

 ここでは背景に円形グラデーションを表示します。