放射状グラデーション4
CSS3放射状グラデーションは、円形または楕円形の勾配です。色は直線軸に沿って変化するが、全ての方向からの開始点の混合ありません。しかし、放射状グラデーションよりも比較的複雑な線形勾配。
放射状グラデーションの形式は次のとおりです。
半径方向の勾配（[<起動>]？[<形状> || <サイズ>]？<ポイント> <ポイント> ...）
表1に記載のラジアル勾配パラメータ：
表1 CSS3放射状グラデーションパラメータ説明
例ラジアル勾配5
放射状グラデーションが線形グラデーションよりも複雑ではあるが、限り、その基本的な構文と関連する属性パラメータの役割の理解と適応するための多くの時間を費やす必要はありません。次に、我々は戦闘によって放射状グラデーションの使用を強化する必要があります。我々は、400個のピクセルの幅を持って、このセクションのすべての例には、高さ300個のピクセルコンテナが実現しました。
容器の内部から半径方向外側に、勾配
、中心は容器の中央一見単純放射状グラデーションで、次のように色「ピンク」色を達成するための「＃ffc107」半径方向勾配、CSSコードがあります：
図1に示されているブラウザに結果を表示します。
図単純放射状グラデーション1
あなたは、円形のグラデーションを作りたい場合は、次のようにではなく楕円形の勾配よりも、単にキーワード「円」を追加し、我々は本実施形態に基づいて、キーワード「円」を追加し、コードは次のとおりです。
このとき、階調は、図2に示されているブラウザの結果に見円、次のようになります。
図2の円形グラデーション
あなたが見ることができるように、段階的な円形、楕円形勾配が水平半径と垂直半径は、同じ長さの値を有する、特殊です。勾配円は楕円勾配の特別な場合であるので、我々主半径（水平半径）とマイナー半径（垂直半径）は、楕円の勾配と同じでない場合勾配。メジャーおよびマイナー半径が等しい半径ない場合などにはなって、上記の前記楕円形状の放射グラデーション勾配、楕円形の製造における勾配は、使用するキーワード「楕円」であってもよいです。
第二に、所定の半径の半径方向の勾配
半径方向の勾配を作る異なったキーワードを使用することに加えて、だけでなく、半径方向の勾配を行うことで、同心円の形状を決定するメジャーおよびマイナー半径の半径の勾配パラメータの異なる半径方向の勾配の効果を得ることができます。これは、半径方向勾配「200pxの、100ピクセル」の半径として定義されます。水平半径200pxの、垂直半径100pxに、「＃ffc107」色「ピンク」カラーから半径方向勾配：
このとき、階調レベルが図3に示された結果を表示するためにブラウザに半径200pxの、楕円の100pxに垂直半径なります。
図3は、から放射状グラデーションの半径を定義します
第三に、所定の半径及び中心位置の半径方向の勾配
上記の方法に加えて、単純な半径方向の勾配の効果を可能にし、また、勾配フォームフィット中心位置を使用することができます。キーワードで「AT」の主な用途は、放射状グラデーションの中心の位置を定義します。背景位置属性に似た放射状グラデーションの中心位置。例えば、中心位置「100ピクセル、150ピクセル」、200pxの水平半径、「＃ffc107」色「ピンク」色から垂直、放射状グラデーションの100pxに半径
このとき、階調レベルがブラウザで、図4に示す効果を表示するために、半径で200pxの、100pxに垂直楕円の半径と中心位置「100pxに200pxの」次のようになります。
放射状グラデーションの中心の4及び図カスタム半径位置
特定の値、百分率およびそのような「中央」、「上」、「右」、「底部」などのキーワードの数を定義するために使用することができるの中心位置を設定することに加えて、「左」及びこれらのキーワードの組み合わせ、例えばトップ」として「」左右下「など、キーワードシーケンシャル組み合わせの位置を逆にしてもよいです。
四、繰り返し放射状グラデーション
線形グラデーションのように、我々はまた、放射状のグラデーションを繰り返すように設定することができます。同様に、あなたは、放射状グラデーション関連のプロパティを使用して複製を作成することができます。そして、線形勾配構文は似ていますが、放射状のグラデーショングラデーションを繰り返すごとに、たとえば次のように、我々は放射状の勾配が3色を繰り返し行います。
：ブラウザ、勾配5を参照してください。
図5は、三色の放射状グラデーションを繰り返します
上記ご理解の例をいくつ後、読者はあなた自身のグラデーション効果をDIYすることができます。