Css needs shadow effect, css shadow effect
Box-shadow: 0 0 10px 10px # b9bcbu;
CSS3 box-shadow attributes
CSS Reference Manual
Instance
Add box-shadow to the div element:
div{box-shadow: 10px 10px 5px #888888;}
Try it yourself
There are more instances at the bottom of the page.
Browser support
| IE |
Firefox |
Chrome |
Safari |
Opera |
| |
|
|
|
|
IE9 +, Firefox 4, Chrome, Opera, and Safari 5.1.1 support the box-shadow attribute.
Definition and usage
The box-shadow attribute adds one or more shadows to the box.
Tip: Use the border-image-* attribute to construct a nice scalable button!
| Default Value: |
None |
| Inheritance: |
No |
| Version: |
CSS3 |
| JavaScript Syntax: |
Object. Style. boxShadow = "10px 10px 5px #888888" |
Syntax
box-shadow: h-shadow v-shadow blur spread color inset;
Note: box-shadow adds one or more shadows to the box. This attribute is a list of shadows separated by commas. Each shadow is defined by 2-4 length values, optional color values, and optional inset keywords. The value of the omitted length is 0.
| Value |
Description |
Test |
| H-shadow |
Required. The position of the horizontal shadow. Negative values are allowed. |
Test |
| V-shadow |
Required. The position of the vertical shadow. Negative values are allowed. |
Test |
| Blur |
Optional. Fuzzy distance. |
Test |
| Spread |
Optional. The shadow size. |
Test |
| Color |
Optional. The color of the shadow. See CSS color values. |
Test |
| Inset |
Optional. Change the external shadow (outset) to the internal shadow. |
Test |
Try it yourself-instance
-
Picture on the table
-
This example shows how to create a Polaroid image and rotate the image.
Related Pages
CSS3 Tutorial: CSS3 border
CSS Reference Manual
If you forget it, move it first.