Differences
This shows you the differences between two versions of the page.
| — | development:css:box_shadow [2019/10/31 09:04] (current) – created - external edit 127.0.0.1 | ||
|---|---|---|---|
| Line 1: | Line 1: | ||
| + | ====== CSS: Box shadow ====== | ||
| + | Adding a simple shadow to any rectangle shaped object is quite easy. Here is how to do it cross-browser. | ||
| + | <code css> | ||
| + | .shadow { | ||
| + | -moz-box-shadow: | ||
| + | -webkit-box-shadow: | ||
| + | box-shadow: 3px 3px 5px 6px #ccc; | ||
| + | } | ||
| + | </ | ||
| + | - The horizontal offset of the shadow, positive means the shadow will be on the right of the box, a negative offset will put the shadow on the left of the box. | ||
| + | - The vertical offset of the shadow, a negative one means the box-shadow will be above the box, a positive one means the shadow will be below the box. | ||
| + | - The blur radius (optional), if set to 0 the shadow will be sharp, the higher the number, the more blurred it will be. | ||
| + | - The spread radius (optional), positive values increase the size of the shadow, negative values decrease the size. Default is 0 (the shadow is same size as blur). | ||
| + | - Color | ||
| + | - You can put ' | ||