HTML and CSS Reference
In-Depth Information
Several CSS3 features have been covered in previous chapters because
they have broad support in modern browsers, they are used to accom-
plish enhancements without major impact on the design if not
supported, or both. Either way, they can be incorporated into the toolbox
for most new web projects.
This chapter will give you a look at other new properties you can use
today as well as what is to come. In some cases, these features have
much less support in current browsers than the features covered
elsewhere. Included in this chapter is information on current browser
support for each property to help you make an informed decision about
which of these properties have wide enough support to find their way
into your projects. Check the already mentioned browser support charts
or When Can I Use… (
http://caniuse.com/
)
for detailed and current
browser support information before deciding whether to use each
property.
Drop shadows, either solid or with feathered edges, can be drawn behind
content boxes using the
box-shadow
property. CSS3 box shadows are
more flexible than what you might be able to do with older techniques
such as using a fixed-sized, semitransparent PNG image as the back-
ground image of an item. The
box-shadow
property can take one or more
comma-separated
<shadow>
definitions.
■
none
: No shadow is drawn.
■
<shadow>
: The definition of a shadow.
The description of a CSS
<shadow>
has three parts: two to four
<length>
values, a shadow
<color>
, and an optional
inset
keyword. The
<length>
values represent, in order, the horizontal offset of the shadow, the verti-
cal offset of the shadow, the blur distance (
0
is no blur), and a spread
