CSS3 box-shadow property
Examples
Adding to the div element shadow:
div
{
box-shadow: 10px 10px 5px #888888;
}
{
box-shadow: 10px 10px 5px #888888;
}
At the bottom of this page for more examples.
Browser Support
Figures in the table represent the first browser to support the version number of the property.
Immediately following the digital -webkit-, -ms- or -moz- ago in support of the prefix attribute first browser version number.
| Attributes | |||||
|---|---|---|---|---|---|
| border-image | 10.0 -webkit- | 9.0.0 | 4.0 (2.0) [3] 3.5 (1.9.1) -moz | 5.1 [1] 3.0 -webkit | 10.5 [1] -o- |
Attribute definitions and instructions
box-shadow property can set one or more of the drop shadow box.
| Defaults: | none |
|---|---|
| inherit: | no |
| version: | CSS3 |
| JavaScript syntax: | object .style.boxShadow = "10px 10px 5px #888888" |
grammar
box-shadow:h-shadow v-shadow blur spread colorinset;
Note: boxShadow property to add one or more drop shadow to the frame.The property is a comma-separated list of shadow, each shaded by a 2-4 length values, an optional color value and an optional inset keyword specified. Omitting length value is 0.
| value | Explanation |
|---|---|
| h-shadow | Required. Position of the horizontal shadow. Allow negative |
| v-shadow | Required. The vertical position of the shadow. Allow negative |
| blur | Optional. Fuzzy Distance |
| spread | Optional. The size of the shadow |
| color | Optional. Shadow color. In the CSS color values to find a complete list of color values |
| inset | Optional. From the shadow of the outer layer (at the beginning) to change the shadow inner shadow |
Online examples
Rotate image
This example demonstrates how to create a "polaroid" Photos and rotate the image.
related articles
CSS3 tutorial: CSS3 Borders
