HTML and CSS Reference
In-Depth Information
Figure 13-11.
FormView
controls with rounded corners
The first
FormView
's borders all have an equal radius of 25px, as specified in the
border-radius
property. The second
FormView
has top corners with radii of 25px, 15px and bottom corners with radii of
50px, 40px respectively.
Shadows
CSS3 lets you add shadows to boxes as well as text. The
box-shadow
and
text-shadow
properties control the
box shadow and text shadow, respectively. You can specify a horizontal offset, a vertical offset, a blur
amount, and a color for both types of shadows.
The following CSS rule uses the
box-shadow
and
text-shadow
properties just discussed:
.shadow {
padding:15px;
background-color:#d0bdbd;
border: 2px solid #071394;
border-radius: 25px 25px 25px 25px;
box-shadow: 5px 5px 5px #808080;
text-shadow: 2px 2px 2px #808080;
}
As you can see,
box-shadow
specifies horizontal and vertical offsets of 5px. A positive offset means the
shadow is dropped down and to the right with respect to the box, whereas a negative value means the
shadow is dropped up and to the left. The
box-shadow
property specifies the blur amount as 5px. The larger
the value, the more blurred the shadow is. Finally, the shadow color is specified as
#808080
(grey).
