HTML and CSS Reference
The border image, as with the buttons, adapts to the size of the content.
You've already seen the direct support for
box shadows in CSS3 , but they can also be
achieved with border-image . If you combine
this CSS with the image on the right, you
can achieve the results that follow:
url('drop-shadow.png') 70 repeat;
You're not likely to use this technique often,
but on occasion you may want more precise
control over a shadow than box-shadow
border-image is hard to override selectively. If you want
to scale an image across a background with the built - in
CSS support (if available) and border-image if not, you'll
need to use something like modernizr.js.
Creating gradients with CSS
Gradients —smooth transitions from one color to another—have always
been popular with designers. In CSS2, the only way to implement a
gradient is to create it as an image in a graphics program and attach it
as a background to the element. This has problems and limitations, sev-
eral of which you're already familiar with:
Images don't always scale well, which can create problems when you
use an image as a background for content that's intended to scale.
If you decide to change your color scheme slightly, you may have to
regenerate all your gradient images.