Partager via

boxShadow property

  • Article

Specifies one or more set of shadow values that attaches one or more drop shadows to the current box.

 

Syntax

Integer value = object.put_boxShadow( v);Integer value = object.get_boxShadow(* sShadow);

Property values

Type: BSTR

none (none)

Initial value. Indicates there is no shadow.

shadow (shadow)

A comma-separated list of shadows, each specified by two to four nonzero length values, an optional color, and an optional inset keyword. See Remarks for specific information about usage.

String format

none | <shadow> [ , <shadow> * ]

CSS information

Applies To All elements
Media visual
Inherited no
Initial Value none

Standards information

Remarks

As defined above, shadow is specified by the optional inset keyword, a horizontal offset value, a vertical offset value, a blur radius, a spread distance, and a color. This can be seen in the syntax below.

<shadow> = inset? && [ <length>{2,4} && <color>? ]

Examples

The following examples use the IHTMLCSSStyleDeclaration::boxShadow property to create three types of drop shadows using the following HTML:

<body>
   <div id="square"></div>
</body>

In the first example, the first IHTMLCSSStyleDeclaration::boxShadow value, 10px, is the horizontal offset of the shadow. Because it is a positive value, the offset is to the right of the blue square. The second value, also 10px, is the vertical offset of the shadow. Because this is a positive value, it offsets the value downwards. The third value, 5px, sets the blur distance. The lower the value, the sharper the shadow's edge. The last value, #B3B3B3, sets the color of the shadow.

#square {
   width: 100px;
   height: 100px;
   background-color: #4682B4;
   box-shadow: 10px 10px 5px #B3B3B3;
}

The following image shows the result:

The second example uses the inset keyword to create inner shadows.

#square {
   width: 100px;
   height: 100px;
   background-color: #228B22;
   box-shadow: inset -5px -5px 5px 1px rgba(0,0,0,0.5), inset 5px 5px 5px 1px rgba(0,0,0,0.5);
}

The following image shows the result:

You can simultaneously create inner and outer shadows by separating each shadow with a comma. In the third example, three shadows are added to an orange square.

#square {
   width: 100px;
   height: 100px;
   background-color: #FF8C00;
   box-shadow: -8px 8px 10px 3px rgba(0,0,0,0.2), inset -2px -2px 3px 0px rgba(0,0,0,0.2), inset 2px 2px 3px 0px rgba(0,0,0,0.2);
}

The following image shows the result:

Requirements

Minimum supported client

Windows Vista with SP1, Windows 7

Minimum supported server

Windows Server 2008 R2

Header

 Mshtml.h

IDL

 Mshtml.idl

DLL

 Mshtml.dll

See also

How to Add Drop Shadows with CSS3