CSS Reference Manual

CSS @rules (RULES)

Complete List of CSS Properties

CSS3 box-sizing Attribute CSS bottom attribute

CSS3 box-Usage and examples of shadow attribute

box-The shadow CSS property applies one or more shadow effects to the box of an element.

The following table describes the usage and version history of this attribute, as well as the syntax of using this attribute in JavaScript scripts.

Default value:	none
Applies to:	All elements. It also applies to::first-letter.
Inheritance:	none
Animaatable:	is.View animation properties.
version:	CSS3new feature
JavaScript syntax:	object.style.boxShadow="8px 8px 6px #000000"

box-The syntax of using shadow

The syntax of this attribute is as follows:

box-shadow: [, , ... shadowN] | none | initial | inherit
　　　　　　　where shadow is: [ inset [ offset-x offset-y blur-radius spread-radius color ] ]

The following examples demonstrate how to use box-Shadow Attribute.

Example

.shadow{
　　　　width:　150px;
　　　　height:　150px;
　　　　background:　#ccc;
　　　　border:　1px　solid　#999;
　　　　box-shadow:　2px　2px　4px　2px　#999;
}

Test See‹/›

You can use the inset keyword to apply a shadow inside the element box. The inset shadow is drawn inside the border, above the background, but below the content.

Example

.shadow-inside{
　　　　width:　150px;
　　　　height:　150px;
　　　　background:　#ccc;
　　　　border:　1px　solid　#999;
　　　　box-shadow:　inset　0　0　6px　2px　#999;
}

Test See‹/›

Attribute Values

The following table describes the values of this attribute.

Value	Description
Required -The following values must be specified to make the attribute valid.
offset-x	The first length value specifies the horizontal distance of the shadow. A positive value will draw the shadow to the right of the box, while a negative value will draw the shadow to the left.
offset-y	The second length value specifies the vertical distance of the shadow. A positive value will offset the shadow downward, while a negative value will offset the shadow above the element.
Optional -The following values are optional.
blur-radius	The third length value is the blur distance. The larger the value, the greater the blur, so the shadow becomes larger and brighter. The default value is 0, and the shadow is very sharp. Negative values are not allowed.
spread-radius	The fourth length is the expansion distance. A positive value will expand the shadow shape in all directions by the specified radius. A negative value will shrink the shadow shape.
color	The color is the color of the shadow. The value can be any supportedColor Value. If not specified, it is usuallycolorValue of the attribute.
inset	If present, change the projection shadow from external shadow to internal shadow. Embedded shadows are drawn inside the border, above the background, but below the element content.
none	No shadow will be displayed. This is the default value.
initial	Set this attribute to its default value.
inherit	If specified, the associated element adopts its parent element box-The shadow Attribute Values.

Browser Compatibility

box-Browser Compatibility of the shadow Attribute, the numbers in the table below represent the minimum version number of the browser that supports this attribute; all mainstream browsers support this attribute.

	Firefox 3.5+ ^-moz-,4 + Google Chrome 4+ ^-webkit-,10+ Internet Explorer 9+ Apple Safari 3.1+ ^-webkit-,5.1 + Opera 10.5+