HTML and CSS Reference
In-Depth Information
Figure 14.5
A linear gradient
with three colors.
Unfortunately, the draft of the CSS3 Images Module specification and
the syntax used by WebKit browsers and Firefox vary a good deal, so the
definition of the gradient is currently quite complex. Westciv has a handy
tool to create gradients and code for either browser at
http://westciv.
CSS gradients are supported in their experimental forms in Firefox 3.6+,
Safari 4+, and Chrome 3+.
Border Images
Flexible, image-based borders can replace the standard border styles
using the
border-image
property. This is achieved by slicing the border
area into a nine-segment grid representing each of the corners of the
border area and the sides, as shown in
Figure 14.6
. A single image file is
similarly split into nine segments and mapped to each of the areas of the
border area and the center of the container.
Figure 14.6
An example
of the nine-
quadrants of
an image used
for a border
background.
