Example
Add a box-shadow to a div element:
div
{
box-shadow: 10px 10px 5px #888888;
}
{
box-shadow: 10px 10px 5px #888888;
}
<!DOCTYPE html>
<html>
<head>
<style>
div
{
width:300px;
height:100px;
background-color:yellow;
box-shadow: 10px 10px 5px #888888;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
<html>
<head>
<style>
div
{
width:300px;
height:100px;
background-color:yellow;
box-shadow: 10px 10px 5px #888888;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
The box-shadow property is supported in IE9+, Firefox, Chrome, Opera, and
Safari 5.1.1.
Note: The box-shadow property attaches one or more drop-shadows to the
box. The property is a comma-separated list of shadows, each specified by 2-4
length values, an optional color, and an optional inset keyword. Omitted
lengths are 0.
Definition and Usage
The box-shadow property attaches one or more drop-shadows to the box.| Default value: | none |
|---|---|
| Inherited: | no |
| Version: | CSS3 |
| JavaScript syntax: | object.style.boxShadow="10px 10px 5px #888888" |
Syntax
box-shadow: h-shadow v-shadow blur spread color inset;
| Value | Description | Play it |
|---|---|---|
| h-shadow | Required. The position of the horizontal shadow. Negative values are allowed | |
| v-shadow | Required. The position of the vertical shadow. Negative values are allowed | |
| blur | Optional. The blur distance | |
| spread | Optional. The size of shadow | |
| color | Optional. The color of the shadow. The default value is black. Look at CSS Color Values
for a complete list of possible color values. Note: In Safari (on PC) the color parameter is required. If you do not specify the color, the shadow is not displayed at all. |
|
| inset | Optional. Changes the shadow from an outer shadow (outset) to an inner
shadow +CSS3 +CSSReflex +CSSCHOPPER +CSS Author +CSSW Yemen-Sana'a +Css Color +CSSW Yemen-Sana'a +CSS Light +CSS Mobi |
No comments: