HTML and CSS Reference
In-Depth Information
Rounded corners work well across all browsers with double and solid borders. However, other border styles
produce dramatically different effects. Figure 9-14 shows how IE 9 (left) and Firefox 14 (right) handle rounded
corners on dashed and dotted borders.
Figure 9-14. Rounded corners on dashed and dotted borders in IE 9 (left) and Firefox 14 (right)
The color transitions on groove , inset , outset , and ridge border styles are also less than satisfactory when
used with rounded corners.
Adding Drop Shadows With box-shadow
he box-shadow property adds one or more drop shadows to an element. You specify a shadow using 2-4 space-
separated lengths, which represent the following values (in this order):
Horizontal offset: A positive value positions the shadow to the right. A negative value
positions it to the left.
Vertical offset: A positive value moves the shadow down. A negative value moves it up.
Blur radius: If omitted or set to 0 , the shadow has a crisp edge. Negative values are not
Spread distance: A positive value causes the shape to expand in all directions.
A negative value (used with an inset shadow) causes it to contract. To create a spread
effect without setting a blur radius, the third length must be set to 0 .
In addition to these lengths, you can specify a color. Otherwise, the shadow is the same color as the
element's text. By default, the shadow is drawn outside the element, but you can draw it inside the element by
adding the inset keyword. To specify multiple shadows on the same element, separate the definition of each
shadow with a comma. The shadow effects are drawn with the first one on top, and each subsequent one layered
behind. If you want shadows to overlap, list the smaller ones first.
The most recent versions of most browsers support the standard box-shadow property. However, Android
4 (ice Cream sandwich), safari 5, and older versions of ios safari need the -webkit browser-specific prefix.
The styles for box-shadow.html contain the following rules (for clarity, I'm showing only the standard
#drop1 {
box-shadow: 5px 5px 7px rgba(0,0,0,0.3);
Search WWH ::

Custom Search