HTML and CSS Reference
-webkit-box-shadow for Apple Safari and Google Chrome (plus any other browsers using the
Webkit rendering engine).
-ms-box-shadow for Microsoft Internet Explorer.
-o-box-shadow for Opera.
Each of these prefixed properties represents one browser's implementation of box-shadow ; Webkit
browsers should ignore Mozilla prefixed properties, and vice versa. Vendor prefixes allow both the browser
vendors and web developers to safely experiment with in-progress specifications before they're widely
available. You can use prefixed CSS3 features to target only browsers that support them with little concern
about how they might impact other browsers.
Automatic CSS validators will usually indicate a warning when they encounter a vendor-specific prefix.
That's just the validator doing what it's supposed to do and warning you about a non-standard or
unrecognized property, selector, or value. If you know what you're doing you can disregard those warnings
and bravely forge ahead into the frontiers of cutting-edge CSS.
Once the specification for an experimental feature is stable and the vendor has thoroughly tested and
debugged their implementation, that browser should begin to support the property without the vendor-
specific prefix. In due time, the browser should stop supporting the prefixed version in favor of the un-
prefixed standard. Vendor prefixes aren't meant to last forever; they're intended for limited, short-term use,
not permanent implementations.
Whenever you use a vendor-specific prefix in your CSS, always also include the un-prefixed standard
version, even though some browsers may not yet support the feature without a prefix. Use vendor prefixes
with the knowledge that they will soon disappear.
Furthermore, you can (and often should) also include the prefixes for all the major browsers, including
those that haven't yet implemented the feature at all, even with a prefix. Covering all the bases can help to
future-proof your websites for the next generation of browsers. Using only one vendor's prefix would
unfairly exclude people using other browsers.
Throughout this section we'll be covering some properties and values that are only supported with vendor
prefixes in some browsers, or that required a vendor prefix until recently. In each case we'll include the
prefixes of all four major vendors as well the un-prefixed standardized version. It may seem redundant—
because it is—but it's the responsible way to build websites.
The box-shadow property renders a shadow around, behind, or even within almost any element's
bounding box. An outer cast shadow can make the box appear to float above the page surface, or an inner
shadow can make the box appear like a depression into the page surface or like a cutout window. A box
shadow has no effect on the size or layout of the box itself, and shadows can overlap other content.
This property accepts a set of values describing different aspects of the shadow:
offset-x and offset-y: These are two required length values that indicate the horizontal and vertical
offset of the shadow. The first length indicates the horizontal offset on the x-axis and the second