MDN may have intermittent access issues April 18 13:00 - April 19 01:00 UTC. See whistlepig.mozilla.org for all notifications.

mozilla
Your Search Results

    radial-gradient

    概要

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

    放射状グラデーションは中心位置最終形状の輪郭線と位置、カラーストップで定義されます。放射状グラデーションは中心から最終形状に向かい、潜在的にはそれを超えて延びるもので、最終形状と一致する、連続した一様に拡大する同心の形状でできています。カラーストップは、中心から右方向に水平に延びる仮想的なグラデーションレイの上に配置されます。カラーストップの位置を決めるパーセンテージは、最終形状とこのグラデーションレイの交点を 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 です。
    <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 グラデーションの形状は、その中心から最も遠いグラデーションボックスの頂点に接します。

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

     

    ellipse farthest-corner
    background-image: radial-gradient(ellipse farthest-corner at 45px 45px , #00FFFF 0%, rgba(0, 0, 255, 0) 50%, #0000FF 95%);
    
    470px 47px
    background-image: radial-gradient(ellipse farthest-corner at 470px 47px , #FFFF80 20%, rgba(204, 153, 153, 0.4) 30%, #E6E6FF 60%);
    
    farthest-corner
    background-image: radial-gradient(farthest-corner at 45px 45px , #FF0000 0%, #0000FF 100%);
    16px radius fuzzy circle
    background-image: radial-gradient(16px at 60px 50% , #000000 0%, #000000 14px, rgba(0, 0, 0, 0.3) 18px, rgba(0, 0, 0, 0) 19px);
    

    仕様

    仕様書 策定状況 コメント
    CSS Image Values and Replaced Content Module Level 3
    The definition of 'radial-gradients()' in that specification.
    勧告候補  

    ブラウザ実装状況

    Help improve compatibility tables by filling out this 11 question survey.

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

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

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

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

    関連情報

    ドキュメントのタグと貢献者

    Contributors to this page: Level, dskmori, sosleepy, ethertank, FredB
    最終更新者: dskmori,