Style boxShadow attribute

Definition and usage

boxShadow Sets or returns the projection (drop-shadow) of the box element's attribute.

See also:

CSS reference manual:box-shadow hantusi

Example

Add box-shadow to div element:

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

Try it yourself

Syntax

Return boxShadow property:

object.style.boxShadow

Set boxShadow property:

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

Note:boxShadow The attribute adds one or more shadows to the box. This attribute is a list of shadows separated by commas, each shadow is specified by 2-4 length values, an optional color value, and an optional 'inset' keyword. The omitted length value is 0.

Attribute value

Value Description
none Default value. The shadow is not displayed.
h-shadow Required. The horizontal position of the shadow. Negative values are allowed.
v-shadow Required. The vertical position of the 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.

See CSS color values, for a complete list of possible color values.

Tip:In Safari (on PC),color The parameter is required. If no color is specified, the shadow does not appear.
inset Optional. Changes the external shadow (outset) to an internal shadow.
initial Sets this property to its default value. See initial。
inherit Inherits this property from its parent element. See inherit。

Technical details

Default value: None
Return value: kafin cikakken box-shadow hantusi。
CSS ɗanar: CSS3

Tsarin ɗanar

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Dukiya 9.0 Dukiya 5.1 Dukiya