Creating a Box Shadow
Description
We can add drop shadows to an element's box by using the drop-shadow property.
The value for the box-shadow element is made up as follows:
box-shadow: hoffset voffset blur spread color inset;
- hoffset - The horizontal offset, a length value. A positive value offsets the shadow to the right, and a negative value offsets the shadow to the left.
- voffset - The vertical offset, a length value. A positive value offsets the shadow below the element's box, and a negative value offsets the shadow above the element's box.
- blur - (Optional) Sets the blur radius, a length value. The larger the value, the more blurred the edge of the box. For the default value, 0, the edge of the box is sharp.
- spread - (Optional) Sets the spread radius, a length value. Positive values make the shadow expand in all directions, and negative values cause the shadow to contract toward the box.
- color - (Optional) The color of the shadow. If omitted, the browser will select a color.
- inset - (Optional) Causes the shadow to be inset inside the box.
Example
The following code creates a Drop Shadow
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
p {<!-- www .ja v a2 s . c o m-->
border: 10px double black;
box-shadow: 5px 4px 10px 2px gray;
}
</style>
</head>
<body>
<p>This is a test.</p>
</body>
</html>
Example 2
To define multiple shadows in a single box-shadow declaration, separate each declaration with a comma.
The following code applies Multiple Shadows to an Element.
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
p {<!--from w w w. j ava 2 s. c o m-->
border: 10px double black;
box-shadow: 5px 4px 10px 2px gray, 4px 4px 6px gray inset;
}
</style>
</head>
<body>
<p>This is a test.</p>
</body>
</html>