HTML and CSS Reference
In-Depth Information
The values for the box shadow are the same as for text-shadow —with two
exceptions. A fourth length value, spread-radius , can be specified to grow or shrink the
shadow. This value is optional and is 0 if left unspecified, rendering the shadow in the
same size as the element. As an example, the following class rule displays a blurry gray
shadow to the bottom right of any block element using this class:
.drop-shadow { box-shadow: 3px 3px 3px 6px #ccc; }
The second value unique to the box-shadow property is the inset keyword. If
present, the shadow displays inside the box instead of as a drop shadow on the outside.
.inset-shadow { box-shadow: inset 3px 3px 3px 6px #ccc; }
box-shadow is a CSS 3 property and is implemented in Chrome 10+, Firefox 4+, IE9+,
Safari 5.1+, and Opera 10.5+. Support can be expanded using the -webkit and -moz
prefixes, as shown here:
.drop-shadow
{
/* Chrome 1-5, Safari 2-5.1+ */
-webkit-box-shadow: 3px 3px 5px 6px #ccc;
/* Firefox 3.5-3.6 */
-moz-box-shadow: 3px 3px 5px 6px #ccc;
box-shadow: 3px 3px 5px 6px #ccc;
}
Search WWH ::




Custom Search