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

repeating-linear-gradient() function

Specifies a repeating linear gradient, in which colors transition smoothly from a starting point to one or more color stops, and then repeat indefinitely.

Internet Explorer 10

 

Syntax

repeating-linear-gradient

([ [ <angle> | to <side-or-corner> ] , ] ? <color-stop> [ , <color-stop> ] +)

Parameters

angle

Optional. The angle the gradient line should assume, expressed as a number followed by an angle units designator (for instance, "deg").

"0deg" points upward and positive angles increase in a clockwise direction. Therefore, "90deg" points toward the right, "180deg" points downward, and so on.

If no angle is provided, the gradient line starts in the corner or side opposite the corner or side specified by <side-or-corner>.

side-or-corner

Optional value that specifies an corner point or side for the gradient. This value begins with "to", which is followed by one or two of the following keywords. Including one keyword specifies an ending side, and two keywords specify an ending corner.

  • The following values can be used as the first value only:
    • left  First value only. Indicates gradient ends on the left.
    • right  First value only. Indicates gradient ends on the right.
  • The following values can be used as the second value only:
    • top  Second value only. Indicates gradient ends on the top.
    • bottom  Second value only. Indicates gradient ends on the bottom.
  • Not including any keywords or angle is equivalent to "to bottom".
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.

Each stop point can have an optional percentage or supported length value that indicates where along the gradient line to place the color stop. "0%" (or "0px", "0em", and so on) indicates the starting point (or side); "100%" indicates the ending point (or side).

Remarks

Once the last color stop has been reached, the gradient starts again at the first color stop and repeats. It's a good idea to specify identical colors for the first and last color stops to prevent abrupt color changes between each repeating group.

The syntax for the repeating-linear-gradient function is identical to that of the linear-gradient function.

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-repeating-linear-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

Following is an example of a repeating linear gradient. It transitions between two colors—blue and yellow.

A repeating linear gradient transitioning between two colors

background-image: repeating-linear-gradient(#00A3EF, #FFF133 30px, #00A3EF 50px);

See also

CSS Gradient Background Maker

 

 

표시:
© 2014 Microsoft