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).
Search WWH ::

Custom Search