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

versions. A lot of vendor extensions are involved, and IE8 and earlier
take quite a bit of work, as we'll look at next.

12 14 4 6 8 9 10 11.1 11.5 5 5.1

text-shadow ● ● ● ● ○ ○ ○ ● ● ● ●

box-shadow ● ● ● ● ○ ● ● ● ● ○ ●

border-image ○ ○ ○ ○ ○ ○ ○ ○

border-radius ● ● ● ● ● ● ● ● ● ●

Multiple back-
grounds

● ● ● ● ● ● ● ● ● ●

background-size ● ● ● ● ● ● ● ● ● ●

Gradients ○ ○ ○ ○ ● ○ ○ ○ ○

Key:
● Complete or nearly complete support
○ Incomplete or alternative support
Little or no support

Cross-browser drop shadows
Chrome (before 10), Safari (before 5.1), and Firefox (before 4.0) use a
vendor extension for box and text shadows; the vendor extension is the
same for both. Neither of the WebKit browsers initially supported
inset but current versions do; spread-radius support was added in
Chrome 8 and Safari 5 but didn't work reliably until Chrome 10 and
Safari 5.1. Opera and Microsoft were confident enough in the stability
of the spec to skip the vendor extension stage and implement the box-
shadow rule directly.
To support all browsers, you'll need to issue multiple declarations like
this:

-moz-box-shadow: rgb(0,0,0) 3px 3px 3px 9px;
-webkit-box-shadow: rgb(0,0,0) 3px 3px 3px, rgb(0,0,0) 3px 3px 9px;
box-shadow: rgb(0,0,0) 3px 3px 3px 9px;