HTML and CSS Reference
In-Depth Information
buttons. There are two drawbacks: First the longer (bottom) image can be
required to be quite large if it needs cover an unknown amount of content,
and second the bottom image can bleed through the outside of the
corners of the top element if the outside of the corners is transparent.
note Why not use multiple background images on one element to do this?
The same older browsers that don't support border-radius do not
support multiple background images.
Four Corners
In Chapter 6, while learning about absolute positioning, you saw an
example (refer to Figure 6.1) that took four small boxes and placed them
into each corner of their parent element. You can use this pattern to
create hooks to attach background images to, representing each of the
four corners. Though this method has more overhead than previous
methods and requires some added markup, the results are more flexible
than other solutions. Figure 8.10 combines the four positioned corners
with a background image sprite.
Figure 8.10
Four backgrounds
used to simulate
rounded corners.
div {
position: relative;
width: 20%;
padding: 8px;
background: #CCC;
(continues on next page)
Search WWH ::

Custom Search