CSS Backgrounds and Borders Module Level 3: Box Shadow Chapter

[LONGSTATUS] [DATE]

This version:
http://dev.w3.org/csswg/css3-background/box-shadow
Latest version:
[LATEST]
Previous versions:
http://www.w3.org/TR/2005/WD-css3-background-20050216
Editors:
Bert Bos (W3C)
Elika J. Etemad (Invited Expert)
Brad Kemper (Invited Expert)

Abstract

This document contains the definition of the 'box-shadow' property, which has been removed from the CSS3 Backgrounds and Borders Module until stabilized.

Status of this document

This is a scrappy bit of an Editor'd Draft, is totally unstable, and has no official status whatsoever. Treat it as you would a post-it note on the editors' desk.

The 'box-shadow' property

Name: box-shadow
Value: none | <shadow> [ , <shadow> ]*
Initial: none
Applies to: all elements
Inherited: no
Percentages: N/A
Media: visual
Computed value: any <length> made absolute; any color computed; otherwise as specified

The 'box-shadow' property attaches one or more drop-shadows to the box. The property is a comma-separated list of shadows, each specified by 2-4 length values, an optional color, and an optional ''inset'' keyword. Omitted lengths are 0, omitted colors are a UA-chosen color.

Where 

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

The components of each <shadow> are interpreted as follows:

An outer box-shadow casts a shadow as if the border-box of the element were opaque. The shadow is drawn outside the border edge only: it is not drawn inside the border-box of the element.

An inner box-shadow casts a shadow as if everything outside the padding edge were opaque. The inner shadow is drawn inside the padding edge only: it is not drawn outside the padding box of the element.

If the box has a nonzero 'border-radius', the shadow is rounded in the same way.

This is still under discussion. Please send comments to www-style.

However, if the box has a border-image, the shadows drawn differently: they are masked by the border-image instead of the border area as follows.

If the UA is unable to create shadows that respect the transparent and partially-transparent aspects of the border-image, it must not create a shadow at all. The UA may ignore spread values when drawing shadows for a border-image.

If an element has multiple boxes, all of them get drop shadows, but shadows are only drawn where borders would also be drawn, see 'box-break'.

The shadow effects are applied front-to-back: the first shadow is on top and the others are layered behind. Shadows do not influence layout and may overlap other boxes or their shadows. In terms of stacking contexts and the painting order, the outer shadows of an element are drawn immediately below the background of that element, and the inner shadows of an element are drawn immediately above the background of that element (below the borders and border image, if any).

Shadows never affect layout, and do not trigger scrolling or increase the size of the scrollable area.

Below are some examples of an orange box with a blue border being being given a drop shadow.

border:5px solid blue;
background-color:orange;
width: 144px;
height: 144px;
 
border-radius: 20px;
 
border-radius: 0;
box-shadow:
  rgba(0,0,0,0.4)
  10px 10px;
 A round-cornered box with a light gray shadow the same shape as the border box offset 10px to the right and 10px down from directly underneath the box. A square-cornered box with a light gray shadow the same shape as the border box offset 10px to the right and 10px down from directly underneath the box. 
box-shadow:
  rgba(0,0,0,0.4)
  10px 10px
  inset
 A round-cornered box with a light gray shadow the inverse shape of the padding box filling 10px in from the top and left edges (just inside the border). A square-cornered box with a light gray shadow the inverse shape of the padding box filling 10px in from the top and left edges (just inside the border). 
box-shadow:
  rgba(0,0,0,0.4)
  10px 10px 0
  10px /* spread */
 A round-cornered box with a light gray shadow the same shape as the box but 20px taller and wider and offset so that the top and left edges of the shadow are directly underneath the top and left edges of the box. A square-cornered box with a light gray shadow the same shape as the box but 20px taller and wider and offset so that the top and left edges of the shadow are directly underneath the top and left edges of the box. 
box-shadow:
  rgba(0,0,0,0.4)
  10px 10px 0
  10px /* spread */
  inset
 A round-cornered box with a light gray shadow the inverse shape of the box but 20px narrower and shorter filling 20px in from the top and left edges (just inside the border). A round-cornered box with a light gray shadow the inverse shape of the box but 20px narrower and shorter filling 20px in from the top and left edges (just inside the border).

The ''box-shadow'' property applies to the ''::first-letter'' pseudo-element, but not the ''::first-line'' pseudo-element. Outer shadows have no effect on internal table elements in the collapsing border model. If a shadow is defined for single border edge in the collapsing border model has multiple border thicknesses (e.g. an outer shadow on a table where one row has thicker borders than the others, or an inner shadow on a rowspanning table cell that adjoins cells with different border thicknesses), the exact position and rendering of its shadows are undefined.

References

Normative references

Other references

Property index

Index