Summary of the use skills of Css3box-shadow __CSS3

Text-shadow is to add a shadow effect to the text, Box-shadow to add a perimeter shadow effect to the element block. With the popularization of HTML5 and CSS3, the use of this special effect is becoming more and more common.

The basic syntax is {box-shadow:[inset] x-offset y-offset Blur-radius Spread-radiuscolor}

Object Selector {box-shadow:[projection method] x axis offset Y axis offset shadow blur radius Shadow extend radius shadow color}

parameter setting for the Box-shadow property is evaluated:

Shadow type: This parameter is optional. If the value is not set, the default projection method is the outer shadow, and if its unique value is "inset", the 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 with a negative value, and the shadow is to the left of the object;

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

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

Shadow extension radius: This parameter is optional, its value can be positive negative, if the value is positive, the entire shadow is extended to expand, or negative value when the decrease;

Shadow color: This parameter is optional. If you do not set the color, the browser will take the default color, but the browser defaults to color inconsistencies, especially in the WebKit kernel under the Safari and Chrome browser performance as a transparent color, firefox/opera under the Black (verified), it is recommended not to omit this parameter.

Compatibility of browsers:

In order to be compatible with the mainstream browsers and support the lower versions of these mainstream browsers, we need to write the name of the attribute in-webkit-box-shadow form when using the Box-shadow property on browsers such as WebKit Chrome and Safari. Firefox browsers need to be written in-moz-box-shadow form.[CSS]View plain copy. box-shadow{//firefox4.0--moz-box-shadow: Projection mode x axis offset y offset shadow blur radius Shadow extend radius shadow color               ;               Safariand Google chrome10.0--webkit-box-shadow: Projection way x axis offset y offset shadow blur radius shadow extension radius shadow color;      firefox4.0+, Google Chrome 10.0+, oprea10.5+ and IE9 Box-shadow: Projection mode x-axis offset y-offset shadow blur radius shadow extension radius shadow color; }

Note: For convenience, the CSS properties of the following text only write the Box-shadow attribute, not write the-moz-and-webkit-prefix form, in use do not forget to add.

For a clearer understanding of the characteristics of Box-shadow, do a few small tests to see the effect:

Related code:

[HTML]  View Plain  copy <! doctype html>