HTML and CSS Reference
In-Depth Information
figure 8-28
Linear gradient applied to the article element
black at the top of
the gradient
medium green
20% down the
background
white 80% down
the background
Trouble? If you are using browser versions older than Internet Explorer ver-
sion 10, Opera version 11.1, Chrome version 10, or Safari version 4, you will
not see the background gradient.
Repeating a Gradient
As you add more color stops, a gradient definition becomes unwieldy and complicated
to write and use. One alternative is to repeat the gradient design. In CSS3, you can
repeat linear and radial gradients using the functions
repeating-linear-gradient( definition )
repeating-radial-gradient( definition )
where definition describes the gradient's appearance using the same parameters in
the linear-gradient() and radial-gradient() functions. The only requirement is
that a stopping position is required for the last color in the list that is less than the size of
the object background. When the last color is reached, the gradient starts over again. For
example, the linear gradient
repeating-linear-gradient(white, black 10%)
Search WWH ::




Custom Search