HTML and CSS Reference
In-Depth Information
FIGURE 4.24
The effects of
circle closest-corner
and
ellipse closest-corner.
FIGURE 4.25
The effects of
circle farthest-side
and
ellipse farthest-side.
Other keyword combinations available to you include:
closest-corner
positions the gradient so that its edge just touches the
corner of the element closest to the origin (
Figure 4.24
).
farthest-side
positions the gradient so that its edge touches the side of
the element farthest from its centre in the case of a circle or the farthest
horizontal and vertical sides in the case of an ellipse (
Figure 4.25
).
farthest-corner
positions the gradient so that its edge just touches the
corner of the element farthest from the origin. You can use the keyword
cover
in place of
farthest-corner
(
Figure 4.26
).