CSS3 Box-shadow Properties Mouse Movement Add shadow effect

Text-shadow is to add a shadow effect to the text, and Box-shadow to add a perimeter shadow effect to the element block.

Basic Syntax : {box-shadow:[inset] x-offset y-offset blur-radius Spread-radius Color}

Object selector:{box-shadow:[projection mode] x-axis offset y-axis offset shadow blur radius Shadow expansion radius shadow color}

Value of the parameter setting for the Box-shadow property:

Shadow type: This parameter is optional. If no value is set, the default projection is an outer shadow, and if its unique value is "inset", its projection is an inner shadow;

X-offset: The shadow horizontal offset, whose value can be a positive or negative value. If the value is positive, the shadow is on the right side of the object and its value is negative, and the shadow is on the left side of the object;

Y-offset: The vertical offset of the shadow, which can also be a positive or negative value. If positive, the shadow is at the bottom of the object and its value is negative, and the shadow is at the top of the object;

Shadow Blur radius: This parameter is optional, but its value can only be positive, and if its value is 0 o'clock, indicates that the shadow does not have a blur effect, the greater the value of the shadow the more blurred the edge;

Shadow expansion radius: This parameter is optional, its value can be positive negative, if the value is positive, then the entire shadow is extended, the inverse value is negative, then zoom out;

Shadow color: This parameter is optional. If you do not set the color, the browser will take the default color, but the browser default color is inconsistent, especially in the WebKit kernel under the Safari and Chrome browser appears as a transparent color, under the Firefox/opera performance of Black.

Compatibility:

To be compatible with mainstream browsers and to support the lower versions of these mainstream browsers, when using the Box-shadow property on browsers such as WebKit-based chrome and Safari, we need to write the name of the property in-webkit-box-shadow form. The Firefox browser needs to be written in-moz-box-shadow form.

. box-shadow{             //firefox4.0-             -moz-box-shadow: Projection mode x-axis offset y-axis offset shadow blur radius Shadow extended radius shadow color;             Safariand Google chrome10.0-             -webkit-box-shadow: Projection mode x-axis offset y-axis offset shadow blur radius Shadow extended radius shadow color;             firefox4.0+, Google Chrome 10.0+, oprea10.5+ and IE9             Box-shadow:  projection mode x-axis offset y-axis offset shadow blur radius Shadow extended radius shadow color;  }

　　

CSS3 Box-shadow Properties Mouse Movement Add a shadow effect