CSS 径向渐变

CSS 径向渐变

A radial gradient is defined by its center.

To create a radial gradient you must also define at least two color stops.

句法

background-image: radial-gradient(shape sizeatposition, start-color, ..., last-color);

By default, shape is ellipse, size is farthest-corner, and position is center.

Radial Gradient - Evenly Spaced Color Stops (this is default)

The following example shows a radial gradient with evenly spaced color stops:

例子

#grad {

background-image: radial-gradient(red, yellow, green);

}

来试试吧 »

Radial Gradient - Differently Spaced Color Stops

The following example shows a radial gradient with differently spaced color stops:

例子

#grad {

background-image: radial-gradient(red 5%, yellow 15%, green 60%);

}

来试试吧 »

Set Shape

The shape parameter defines the shape. It can take the value circle or ellipse. The default value is ellipse.

The following example shows a radial gradient with the shape of a circle:

例子

#grad {

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

}

来试试吧 »

Use of Different Size Keywords

The size parameter defines the size of the gradient. It can take four values:

closest-side

farthest-side

closest-corner

farthest-corner

例子

A radial gradient with different size keywords:

#grad1 {

background-image: radial-gradient(closest-side at 60% 55%, red, yellow,

black);

}

#grad2 {

background-image: radial-gradient(farthest-side at 60%

55%, red, yellow, black);

}

来试试吧 »

Repeating a radial-gradient

The repeating-radial-gradient() function is used to repeat radial gradients:

例子

A repeating radial gradient:

#grad {

background-image:

repeating-radial-gradient(red, yellow 10%, green 15%);

}

来试试吧 »

CSS Gradient Properties

The following table lists the CSS gradient properties:

Property

描述

Sets one or more background images for an element