Introduction to Box-shadow Usage

Grammar:

<strong>box-shadow:</strong><em><length></em><em><length></em><em><length></em><em><length></em> || <em><color></em>

Value:

<em><length></em><em><length></em><em><length>?</em><em><length></em>? || <em><color></em>: Shadow horizontal offset value (preferably positive or negative), shadow vertical offset value (positive or negative value), shadow blur value, shadow color

Now I'm going to put it right to the point of expression:

<strong>box-shadow:</strong>X-axis offset y-axis offset [blur radius] [shadow color] [inset]

· where x-axis offset and y-axis offset are required two values (accept positive or negative)

· The blur radius is optional (default is 0 if not, negative values are not supported)

· Shadow color is optional (if you don't have this value, Gecko-based browsers will use color the value of the property, and WebKit-based browsers will default transparent )

· insetoption is optional (if there is no value, the shadow is an outer shadow, displayed outside the box, in space behind box; If this value, the shadow is the inner shadow, the space is displayed in front of box)

· box-shadowcurrently to be used, based on the Gecko browser written, -moz-box-shadow based on WebKit browser written, -webkit-box-shadow opera written -o-box-shadow , nothing is written, IE9 can be identified.

Another point to note is that the box-shadow following parameters add a shadow effect, you can add more than one set of parameters, each set of parameters separated by commas (,), using multiple shadows on the same element, such as:

box-shadow: 0 1px 2px rbga(0,0,0,0.4), 0 1px 0 rgba(255,255,255,0.5) inset, ……

I used this method in my last article, so let's take a look at it. It is necessary to note that the newly added shadow, the position in the space will automatically move back one layer, specifically what effect I write the code below (only Box-shadow-enabled browsers are visible):

Box-shadow

The code is box-shadow:5px 5px 0 red, 10px 10px 0 blue , as you can see, although the shade of Blue is added later, it is in the shadow of the red in space. One more thing to emphasize is that the shape of the box-shadow specified shadow changes with the border-radius specified fillet. That is, if you do not specify a fillet for box, then the shadow is square, and if you specify a fillet for box, the shadow is also the shadow of the fillet. An extreme example is as follows:

Box-shadow

As for IE6/7/8 can be used filter to achieve, sofish This article is very clear, but I do not agree with this writing. I think it box-shadow is a icing on the cake effect, if the browser is convenient to support, plus, if the browser does not support, it is not necessary to do so. I do not know if this is a kind of Progressive enhancement ...

Introduction to Box-shadow Usage