HTML and CSS Reference
In-Depth Information
This sets the image source to frame1.png, makes all slices
24px
wide, and sets the repeat value for all sides
to
round
. The last two declarations include the
fill
keyword to ensure that the center slice is displayed. Although
the current version of Safari doesn't support it, you need to include
fill
in case a later version does. Figure
9-24
shows the result in Firefox.
Figure 9-24.
Firefox 12+ supports a limited version of border-image
By the time you read this, Firefox and Opera might have added support for
fill
. If they're still using the
browser-specific properties, the preceding code will result in the center slice being discarded. To prevent the
page background from showing through, it's a good idea to add a background color to the style rule. The border
image contains transparent sections, so also set
background-clip
to
padding-box
by adding the following to the
style rule (the code is in border-image9.html):
background-color: #DCEBDD;
background-clip: padding-box;
Browsers that don't support border images also use the background color, so it serves a dual purpose.
Avoiding Problems With the Center Slice
The center section of frame1.png is filled with a solid color, so it doesn't matter how you set the repeat pattern for
the sides. However, frame2.png has a vertical gradient. Figure
9-25
shows the ugly banding of the gradient when
you set the repeat pattern for all sides to
round
(the code is in border-image10.html).
