box-shadow
CSS box-shadow Property
The CSS box-shadow property is used to render shadows for content containers(boxes). Each distinct shadow can get up to 4 parameters and an optional "inset" keyword. You can create a comma separated list of distinct shadows that will apply under the same box in order to create different looking effects, as well as setting shadows to "inset" for embossing and engraving effects.
NOTE: Not all browsers adhere to this property yet.
Example: "inset 1px 2px 3px #000"
The optional inset keyword places a shadow inside of the box.
The first value sets the horizontal offset of the shadow.
The second value sets the vertical offset of the shadow.
The third value sets the blur radius of the shadow.
The fourth value sets the color of the shadow.
none
Specify that no shadow is to be on the container
NOTE: Not all browsers adhere to this property yet.
CSS CODE EXAMPLE
<style type="text/css">
#myDiv {
background: #666;
border: #999 1px solid;
height: 90px;
margin-bottom: 12px;
padding:10px;
color: #FFF;
box-shadow: inset 3px 3px 3px #000, 1px 1px 3px #FFF;
}
#container { background: #C0C0C0; padding:20px; }
</style>
<div id="container">
<div id="myDiv">div content ...</div>
</div>
#myDiv {
background: #666;
border: #999 1px solid;
height: 90px;
margin-bottom: 12px;
padding:10px;
color: #FFF;
box-shadow: inset 3px 3px 3px #000, 1px 1px 3px #FFF;
}
#container { background: #C0C0C0; padding:20px; }
</style>
<div id="container">
<div id="myDiv">div content ...</div>
</div>
div content ...
Possible Values:
specify shadow parametersExample: "inset 1px 2px 3px #000"
The optional inset keyword places a shadow inside of the box.
The first value sets the horizontal offset of the shadow.
The second value sets the vertical offset of the shadow.
The third value sets the blur radius of the shadow.
The fourth value sets the color of the shadow.
none
Specify that no shadow is to be on the container
0 Response to "box-shadow"
Post a Comment