ENHANCING BOXES WITH CSS3 BLING - Practical CSS3: Develop and Design - page 124

FIGURE 4.20 From left to right: top left , bottom center , and right positioning of a gradient. When only one keyword is supplied,
it is assumed to be the horizontal keyword, and the vertical one is given a value of center .
The syntax is a little different than that of linear gradients, so let's go through
the radial gradient syntax step by step.
RADIAL GRADIENT POSITION
The first two values in the syntax ( 50% 50% in the preceding code) dictate the loca-
tion of the origin of the radial gradient: The first value is the horizontal position
inside the container, and the second value is the vertical. In the preceding example,
the radial gradient equates to 50% across from the left side and 50% down from
the top, which places it slap bang in the middle of the container. As with linear
gradients, you can use any unit values that make sense, even negative unit values.
Yo u c a in a l s of u s e k e y w of r d s i in p l a c e of f u in i t v a l u e s i in t h e s a m e m a in in e r a s y of u
learned earlier but with the addition of center if you want the horizontal or vertical
position to be centered in the container (this doesn't make sense for linear gradients,
but it does for radial gradients). Figure 4.20 shows a few examples.