- 放射状のグラデーションを作ってみます。
- 「end color」は要素の外に置けるみたいです。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>background-blend-mode test</title>
<style>
.left{
width :50%;
height: 560px;
float: left;
background:radial-gradient(#ffffff 0%, red 100%);
}
.right{
width: 50%;
height: 560px;
float: right;
background: radial-gradient(#ffffff 0%, red 200%);
}
</style>
</head>
<body>
<div class="left">background:radial-gradient(#ffffff 0%, red 100%);</div>
<div class="right">radial-gradient(#ffffff 0%, red 200%);</div>
</body>
</html>
CSS の
radial-gradient()関数は、原点であるグラデーションの中心から放射状に延びる、カラーのグラデーションを表現する<image>を作ります。この関数の結果は CSS の<gradient>データ型のオブジェクトです。
放射状グラデーションは中心位置、最終形状の輪郭線と位置、カラーストップで定義されます。放射状グラデーションは中心から最終形状に向かい、潜在的にはそれを超えて延びるもので、最終形状と一致する、連続した一様に拡大する同心の形状でできています。カラーストップは、中心から右方向に水平に延びる仮想的なグラデーションレイの上に配置されます。カラーストップの位置を決めるパーセンテージは、最終形状とこのグラデーションレイの交点を
100%としたときの相対値です。各形状は単色で、色は交差したグラデーションレイの色によって定義されます。最終形状として選べるのは
circleかellipseのみです。CSS グラデーションは CSS の
<color>ではなく、固有のサイズを持たない画像です。これは、画像本来のサイズや、優先されるサイズを持たないということです（アスペクト比についても同様です）。実際のサイズは、グラデーションの用いられる要素にマッチしたものになるでしょう。
radial-gradient関数の構文では、グラデーションの繰り返しは行えません。繰り返しを関数で行うなら、CSS のrepeating-radial-gradient関数を使ってください。構文
Formal grammar: radial-gradient( [[ circle || <length> ] [ at <position> ]? , | [ ellipse || [<length> | <percentage> ]{2}] [ at <position> ]? , | [ [ circle | ellipse ] || <extent-keyword> ] [ at <position> ]? , | at <position> , <color-stop> [ , <color-stop> ]+ ) \------------------------------------------------------------------------------/\--------------------------------/ Definition of the contour, size and position of the ending shape List of color stops where <extent-keyword> = closest-corner | closest-side | farthest-corner | farthest-side and<color-stop> = <color> [ <percentage> | <length> ]?Definition of the ending shape radial-gradient( circle, … ) /* Synonym of radial-gradient( circle farthest-corner, …) */ radial-gradient( ellipse, … ) /* Synonym of radial-gradient( ellipse farthest-corner, …) */ radial-gradient( <extent-keyword>, … ) /* It draws a circle */ radial-gradient( circle radius, … ) /* A centered circle of the given length. It can't be a percentage */ radial-gradient( ellipse x-axis y-axis, … ) /* The two semi-major axis are given, horizontal, then vertical */ Definition of the position of the shape radial-gradient (… at <position>, … ) Definition of the color stops radial-gradient (…, <color-stop>) radial-gradient (…, <color-stop>, <color-stop>)値
<position>background-positionやtransform-originと同じように扱われる位置。デフォルトはcenterです。<shape>- グラデーションの形状です。
circle（一定の半径の円）またはellipse（軸に沿った楕円）のいずれかを指定します。デフォルト値はellipseです。<size>- グラデーションのサイズです。以下に示す サイズに使われる定数 の中のひとつです。
<color-stop>- この値は
<color>値、続いて省略可能な停止位置（0% から 100% までの割合、またはグラデーション軸に沿った<length>）で構成されます。<percentage>の0%または<length>の0はグラデーションの中心を表し、値100%は最終形状と仮想的なグラデーションレイの交点を表します。中間値の<percentage>値は、グラデーションレイ上の直線上に配置されます。<extent-keyword>- 最終的な形状がとるべき大きさを記述するキーワードです。以下に示す サイズに使われる定数 の中のひとつです。
