CSS3 box-shadow property
Examples
Adding to the div element shadow:
div
{
box-shadow: 10px 10px 5px #888888;
}
{
box-shadow: 10px 10px 5px #888888;
}
try it"
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