Style boxShadowProperty

Style 对象参考手册Style Object

Examples

Add a shadow to a div element:

document.getElementById("myDIV").style.boxShadow="10px 20px 30px blue";

Try it Yourself »

Definition and Usage

The boxShadow property sets or returns the drop shadow of an element.

Browser Support

Internet Explorer Firefox Opera Google Chrome Safari

IE9+, Firefox, Chrome, Opera, and Safari 5.1.1 support the boxShadow property.

Syntax

Return the boxShadow property:

object.style.boxShadow

Set the boxShadow property:

object.style.boxShadow="none|h-shadow v-shadow blur spread color |inset|initial|inherit"

Note:The boxShadow property adds one or more drop shadows to a box. This property is a comma-separated list of shadows, each shadow specified by 2-4 length values, an optional color value, and an optional inset keyword. Omitted length values are 0.

Property Values

Value Description
none Default value. No shadow is displayed.
h-shadow Required. The position of the horizontal shadow. Negative values are allowed.
v-shadow Required. The position of the vertical shadow. Negative values are allowed.
blur Optional. The blur distance.
spread Optional. The size of the shadow.
color Optional. The color of the shadow. The default value is black. For a complete list of possible color values, seeCSS Color Values。

Note:In Safari (on PC) browsers, the color parameter is required. If you do not specify a color, no shadow is displayed.
inset Optional. Changes the outer shadow (outset) to an inner shadow.
initial Sets this property to its default value. Seeinitial。
inherit Inherits this property from its parent element. Seeinherit。

Technical Details

Default value: none
Return value: A string representing the box-shadow property of an element.
CSS Version CSS3

Related Articles

CSS Reference Manual:box-shadow Property

Style 对象参考手册Style Object

Other Extensions