• Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint
Share this Page URL
Help

Chapter 12. Box Properties > box-shadow Property

12.19. box-shadow Property

Using the CSS3 border module property box-shadow you can add a shadow effect attached to the border of any block element, ensuring that it stands out from the page. Any shadows created in this manner do not otherwise affect the flow of content — for example, if some text immediately follows a block that is set to box-shadow, the shadow is blended into it. If the border is rounded (using one of the border-radius properties), the shadow will also be rounded.

The box-shadow property takes a set of three comma-separated length values followed by a color value. The first length value draws the horizontal offset for the shadow, the second the vertical offset value, and the third sets the blur radius for the shadow. For the latter, a sharp shadow is equal to 0; any other value leads to a larger, more diffuse shadow. The color value that follows these length values sets the color of the shadow. Listing 12.14 shows how this property might be put to use, and its effects are illustrated in Figure 12-21.


PREVIEW

                                                                          

Not a subscriber?

Start A Free Trial


  
  • Creative Edge
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint