HTML and CSS Reference
In-Depth Information
FIGURE 4.23
The effects of
circle closest-side
and
ellipse closest-side
.
But as usual, there are more ways to set the radii: CSS3 supplies several key-
words for setting the radii, which need explaining because they are a bit confusing.
Consider the following examples (
Figure 4.23
):
background: -o-radial-gradient(30% 50%, circle closest-side,
p
rgb(75, 75, 255), rgb(0, 0,
0));
background:
-o-radial-gradient(30% 50%, ellipse closest-side,
p
rgb(75, 75, 255), rgb(0, 0, 0));
So, what's going on here? By using
circle
and
ellipse
, you specify that you
want your gradient to be a circle or an ellipse, respectively.
closest-side
means
that the shape will expand so that it just touches the container side closest to the
point of origin of the radius in the case of a circle and the horizontal and vertical
container sides closest to the point of origin of the radius in the case of an ellipse.
TIP:
Yo u c a n u s e t h e ke y w o r d
contain
in place of
closest-side
.
