EN
이 콘텐츠는 한국어로 제공되지 않아 영어 버전으로 표시됩니다.

radial-gradient() function

Specifies a radial gradient, in which colors transition smoothly from a single point, and then spread outward in a circle or ellipse. A radial gradient is specified by first defining a center point, then the size and shape (if an ellipse) of the final—or 100%—circle or ellipse, and then the color stops in between, separated by commas.

Internet Explorer 10

 

Syntax

radial-gradient

([ [ <shape> || <size> ] [ at <position> ] ? , | at <position> , ] ? <color-stop> [ , <color-stop> ] +)

Parameters

position

Optional value that specifies the center of the gradient. This value can take the same values as the background-position property. If this value is omitted, it defaults to center.

shape

Optional value that specifies the ending shape of the gradient. If this value is omitted, the ending shape is a circle if the size parameter is a single length value, and an ellipse otherwise.

ValueMeaning
ellipse

Indicates gradient is in the shape of an ellipse.

circle

Indicates gradient is in the shape of an circle.

 

size

Optional value that specifies the size of the gradient's ending shape. If this value is omitted, it defaults to farthest-corner.

ValueMeaning
<length(s)>

One or two space-delimited length values or two percentages.

If one length value is specified, it indicates the radius of the circle.

If two values (length or percent) are specified, the first value represents the horizontal radius, and the second the vertical radius.

Percentage values are relative to the corresponding dimension of the gradient box. Percentages can only be used to specify the size of an elliptical gradient, not a circular one.

Negative values are invalid.

closest-side

For circular gradients, this value indicates that the ending-shape is circle sized so that it exactly meets the side of the box closest to its center. For elliptical gradients, the gradient-shape is an ellipse size so that it exactly meets the vertical and horizontal sides of the box closest to its center.

closest-corner

Sizes the gradient-shape so that it exactly meets the closest corner of the box from its center. For elliptical gradients, the gradient-shape has the same ratio of width to height that it would if closest-side was specified.

farthest-side

Similar to closest-side, except the gradient-shape is sized to meet the side of the box that is farthest from its center (for circular gradients) or the farthest vertical and horizontal sides (for elliptical gradients).

farthest-corner

Sizes the gradient-shape so that it exactly meets the farthest corner of the box from its center. For elliptical gradients, the gradient-shape has the same ratio of width to height that it would if farthest-side was specified.

 

color-stop

At least two color stops are required. Each color stop has one or two components—a color component and an optional position component.

The first component defines the color component of a stop point for the gradient. Each stop point has its own designated color, and the area between each point is filled with a continuous color transition from one to the other. This value can be any supported color value.

The second component is an optional percentage or decimal value that indicates where along the gradient ray (similar to a gradient line in a linear-gradient, but from the center outward) to place the color stop. "0%" indicates the start of the gradient ray, and "100%" indicates the point where the gradient ray intersects the ending shape. For instance, a value of "20%" indicates the color stop should be placed at a point 20% of the length of the gradient ray, starting from the beginning of the line. Values can be negative, which indicates that the specified color for that value is at mid-transition to the next color at the center of the gradient, so the visible color at the center will be somewhere between the specified color and the next color. Values can be greater than 100%, which specifies a location a correspondingly greater distance from the center of the gradient.

Remarks

Do not use the Microsoft vendor prefix ("-ms-") before the Cascading Style Sheets (CSS) gradients functions. They are supported unprefixed in Internet Explorer 10 and later.

As of Internet Explorer for Windows Phone 8.1 Update, Internet Explorer for Windows Phone supports "-webkit-radial-gradient" as an alias for this property. However when using the "-webkit-" prefixed property, the syntax is slightly different. Please refer to Safari Developer Library documentation: Using Gradients for the correct syntax.

Examples

Often different radial gradient syntax can be used to produce the same results. For instance, all three of the following examples, when applied to a 250×150-pixel div element, produce the image shown here.

Simple elliptical gradient applied to a 250-by-150-pixel rectangle


background-image: radial-gradient(yellow, blue);

background-image: radial-gradient(ellipse at center, yellow 0%, blue 100%);

background-image: radial-gradient(farthest-corner at 50% 50%, yellow, blue);

The following example is similar to the previous example, but a circular gradient has been specified.

Simple circular gradient applied to a 250-by-150-pixel rectangle

background-image: radial-gradient(circle, yellow, blue);

The following example has three colors specified. Either of the declarations produces the image here.

Elliptical gradient with three color stops specified

background-image: radial-gradient(#FFF133, #16D611, #00A3EF);

background-image: radial-gradient(ellipse at center, #FFF133 0%, #16D611 50%, #00A3EF 100%);

Of course, you can also originate the radial gradient in locations other than the center of the gradient box. Use the closest-side or farthest-side keywords to size the gradient so that the ending shape meets either the closest or farthest side, respectively, of the gradient box.

Radial gradient with three colors, that starts from the bottom left corner

background-image: radial-gradient(farthest-side at left bottom, #FFF133, #16D611 100px, #00A3EF);

The following examples set the center of the gradient at 40px from the left side of the gradient box and 50px from the top side of the gradient box. The first example uses closest-side, so the ending shape of the gradient is defined by the closest sides of the gradient box—namely, the top and left sides.

Small three-color elliptical gradient contained in the upper-left corner of a gradient box

'


background-image: radial-gradient(closest-side at 40px 50px, #FFF133, #16D611, #00A3EF);

The second example uses farthest-side, so the ending shape of the gradient is defined the farthest sides of the gradient box—namely, the right and bottom sides.

Large three-color elliptical gradient that ends at the right and bottom sides of a gradient box

background-image: radial-gradient(farthest-side at 40px 50px, #FFF133, #16D611, #00A3EF);

If you use closest-side or farthest-side with circular gradients, the size is determined by the closest side of the gradient box. For the following closest-side example, that side is the left side.

Small three-color circular gradient contained in the upper-left corner of a gradient box

background-image: radial-gradient(closest-side circle at 40px 50px, #FFF133, #16D611, #00A3EF);

For the following farthest-side example, the size of the circle gradient is determined by the right side of the gradient box.

Large three-color circular gradient that ends at the right side of the gradient box

background-image: radial-gradient(farthest-side circle at 40px 50px, #FFF133, #16D611, #00A3EF);

See also

CSS Gradient Background Maker

 

 

표시:
© 2014 Microsoft