Borders and backgrounds with CSS3 - HTML5 and CSS3 - page 391

earlier. This element with rounded corners, a
gradient, and a drop shadow was created by
applying a mostly standard CSS rule.
The screenshot was taken in IE8 . Here's the CSS
(see the page in full in ch10/css-pie.html):
div {
border: 1px solid #999;
border-radius: 10px;
box-shadow: rgb(0,0,0) 3px 3px 3px 3px;
-pie-background: linear-gradient(top, #000, #fff);
behavior: url(../libs/PIE/PIE.htc);
}
There are two nonstandard properties here. Behavior is the proprietary
IE property that allows all the magic to happen; it contains the URL of
the file that implements the behaviors. -pie-background is required
because, unlike border-radius and box-shadow , IE8 already understands
the background property and will discard any values that it considers
invalid.
Summary
In this chapter, you've learned about features of CSS3 for creating drop
shadows, rounded corners, background effects, and gradients. Most of
these effects could be accomplished visually with CSS2 , but that would
involve creating images and various bits of additional markup to apply
them to elements. The CSS3 approach removes the need for extra
markup and additional requests to the server and is easily adaptable to
the content—you don't need to re-create your background image just
because you decide to make an element 20 pixels wider.
CSS3 isn'T just for visual effects and background images; it also
includes several new features for the formatting and display of text. In
the next chapter you'll learn about using custom fonts, automatically
formatting text into columns, and advanced font control features.