Your Search Results

    radial-gradient

    概要

    CSS の radial-gradient() 関数は、原点であるグラデーションの中心から放射状に延びる、カラーのグラデーションを表現する <画像> を作ります。この関数の結果は CSS の <グラデーション> データ型のオブジェクトです。

    放射状グラデーションは中心位置最終形状の輪郭線と位置、カラーストップで定義されます。放射状グラデーションは中心から最終形状に向かい、潜在的にはそれを超えて延びるもので、最終形状と一致する、連続した一様に拡大する同心の形状でできています。カラーストップは、中心から右方向に水平に延びる仮想的なグラデーションレイの上に配置されます。カラーストップの位置を決めるパーセンテージは、最終形状とこのグラデーションレイの交点を100%としたときの相対値です。各形状は単色で、色は交差したグラデーションレイの色によって定義されます。

    最終形状として選べるのは circleellipse のみです。

    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-positiontransform-origin と同じように扱われる位置。デフォルトは center です。
    <angle>
    グラデーションを決定する角度です。開始点からこの角度に向かって拡大します。デフォルト値は 0deg です。
    <shape>
    グラデーションの形状です。circle (一定の半径の円)または ellipse(軸に沿った楕円)のいずれかを指定します。デフォルト値は ellipse です。
    <size>
    グラデーションのサイズです。以下に示す サイズに使われる定数 の中のひとつです。
    <color-stop>
    この値は <color> 値、続いて省略可能な停止位置(0% から 100% までの割合、またはグラデーション軸に沿った <length>)で構成されます。<percentage>0% または <length>0 はグラデーションの中心を表し、値 100% は最終形状と仮想的なグラデーションレイの交点を表します。中間値の <percentage> 値は、グラデーションレイ上の直線上に配置されます。
    <extent-keyword>
    最終的な形状がとるべき大きさを記述するキーワードです。以下に示す サイズに使われる定数 の中のひとつです。

    サイズに使われる定数

    定数 説明
    closest-side グラデーションの形状は、その中心から最も近いグラデーションボックスの辺に(circle の場合)、またはその中心から最も近い縦と横の辺に(ellipse の場合)内接します。
    closest-corner グラデーションの形状は、その中心から最も近いグラデーションボックスの頂点に接します。
    farthest-side 形状がその中心から最も遠い辺(または縦と横の辺)に接することを除いて closest-side と同じです。
    farthest-corner グラデーションの形状は、その中心から最も遠いグラデーションボックスの頂点に接します。

    以前の草案では 2 つのキーワード containcover をそれぞれ標準的な closest-sidefarthest-corner の別名として定義していました。一部の実装は古い 2 つの変数を外したので、標準的なキーワードだけを使ってください。

    circle cover
    background: -webkit-radial-gradient(45px 45px 45deg, circle cover, aqua 0%, rgba(0, 0, 255, 0) 100%, blue 95%);
    background:         radial-gradient(45px 45px 45deg, circle cover, aqua 0%, rgba(0, 0, 255, 0) 100%, blue 95%);
    
    ellipse farthest corner
    background-image: -webkit-radial-gradient(45px 45px, ellipse farthest-corner, aqua 0%, rgba(0, 0, 255, 0) 100%, blue 95%);
    background-image:         radial-gradient(45px 45px, ellipse farthest-corner, aqua 0%, rgba(0, 0, 255, 0) 100%, blue 95%);
    
    470px 47px
    .riviraes{
      background-image:-webkit-radial-gradient(470px 47px, ellipse farthest-corner, rgb(100%,100%,50%) 20%, rgba(90%,60%,60%,.4) 30%, rgb(90%,90%,100%) 60%);
      background-image:        radial-gradient(470px 47px, ellipse farthest-corner, rgb(100%,100%,50%) 20%, rgba(80%,60%,60%,.4) 30%, rgb(90%,90%,100%) 60%);
    }
    
    cover
    background: -webkit-radial-gradient(45px 45px, cover, rgb(255, 0, 0) 0%, rgb(0, 0, 255) 100%);
    background:         radial-gradient(45px 45px, cover, rgb(255, 0, 0) 0%, rgb(0, 0, 255) 100%);
    

    仕様

    仕様書 策定状況 コメント
    CSS Image Values and Replaced Content Module Level 3 勧告候補  

    ブラウザ実装状況

    機能 Firefox (Gecko) Chrome Internet Explorer Opera Safari
    基本サポート (radial-gradient() 関数のサポート。最終版の構文で使う必要はない) 3.6 (1.9.2)-moz[4]
    16 (16)
    10.0 (534.16)-webkit [2][4] 10.0 [1] 11.60-o 5.1-webkit[2]
    Legacy な webkit の構文 未サポート 3-webkit [2] 未サポート 未サポート 4.0-webkit[2]
    at syntax (最終版の標準構文) 10 (10)-moz[4]
    16 (16)
    未サポート 10.0 11.60-o[4]
    Presto 2.12 でプレフィックスを取り除く予定
    未サポート

    [1] Internet Explorer 5.5 から 9.0 はプロプライエタリな filter: progid:DXImageTransform.Microsoft.Gradient() 関数をサポートしています。

    [2] WebKit は 528 からレガシーな -webkit-gradient(radial,…) 関数 をサポートしています。radial gradients について、Apple の 現在のサポートページも参照してください。

    [4] Firefox 3.6 と Webkit が実装、プレフィックスあり、以前の構文。

    関連情報

    添付ファイル

    ファイル サイズ 日時 添付者:
    Radial gradient principles
    Describes how radial gradients work.
    78242 バイト 2012-07-29 22:09:57 teoli

    Document Tags and Contributors

    Contributors to this page: Level, sosleepy, ethertank, FredB
    最終更新者: ethertank,
    サイドバーを隠す