HTML and CSS Reference
In-Depth Information
Example
<img id="logo" src="logo.gif" style="-webkit-box-reflect:below 5px
-webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,0)),
to(rgba(0,0,0,1)));">
O
NLINE
http://htmlref.com/ch6/boxreflect.html
Compatibility
No specification
Chrome 2+, Safari 4+
Notes
• In WebKit-based browsers this property is
-webkit-box-reflect
.
• The reflection updates automatically as the original image changes. This includes
tooltips.
• The reflection should have no effect on layout.
box-shadow
This property sets the shadow for a box element.
Syntax
box-shadow:
shadow1
[,...
shadowN
] | none | inherit
where each
shadow
is defined as
color x-offset y-offset blur-radius spread-radius
where
color
is the color of the shadow. When unspecified,
color
may be set by the user agent or
inherited from the current color. The
x-offset
and
y-offset
define the shadow position relative
to the element, where positive numbers are to the right and down and negative numbers are
to the left and up, respectively. Setting these values to 0 puts the shadow directly behind the
element. The
blur-radius
defines the degree of blur, with larger numbers making the shadow
more blurry. The
spread-radius
defines the size of the shadow. A positive value makes the
shadow bigger than the object and a negative value makes it smaller than the element.
When unspecified, the
spread-radius
is 0, making the shadow the same size as the element.
