CSS3 Box-shadow

I. Grammar

Box-shadow:inset x-offset y-offset Blur-radius Sperad-radius Color

Bos-shadow: Projection mode x-axis offset y-axis offset shadow blur radius Shadow expansion radius shadow color

PS: You can use one or more projections, if you use multiple projections must be separated by commas ",".

Two. Take the value

The Box-shadow property has a maximum of 6 parameter settings, each of which is evaluated:

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

2.x-offset: The shadow offset of the x-axis, positive, shadows on the right side of the diagonal, negative values, shadows on the left side of the object

3.x-offset: Y-axis shadow offset, positive, shadow at bottom of object, negative value, shadow at top of object;

4. Shadow Blur Radius: This parameter is optional, its value can only be positive, if it is 0 o'clock, indicates that the shadow does not have a blur effect, the larger the value of the shadow edge is more blurred;

5. 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

6. Shadow color: This parameter is optional, if you do not set any color, the browser will take the default color, but the browser default color is different, especially in the WebKit kernel of safari and chrome will be colorless, that is transparent, it is recommended not to omit this parameter.

Three. Browser compatibility:

Add prefix mozilla kernel-moz,webkit kernel-webkit, ie low version with filter method, you can also use the jquery plugin Jquery.boxshadow.js

When the Box-shadow is not given a color, Chrom,firefox and Ie,oprea are shown in black. Safari performance is transparent.

If the shadow offset is too large, the shadow will burst out of the container and run out.

From the effect of the major browsing we can see that the shadow more out of the shadow will burst into the container to run out. There is a picture in the standard that describes how the Box-shadow works, and this graph shows us how to use Box-shadow

This graph can tell us a lot of information, such as the Borer-radius fillet, shadow expansion, Shadow Blur, and how padding affects the object's shadows: Border-radius with a value other than 0 will affect the shape of the shadow with the same effect, However, the border-image does not affect any shape of the object's shadow; The shadow of the object is the same as the hierarchy of the box model, and the outer shadow is below the background of the object and the inner shadow below the border. So the whole level is: border > Inner shadow > Background picture > Background Color > Outer shadow. As we all know, our background image is above the background color.

Effect One: Unilateral effect

. demo2{Box-shadow: -2px 0 0 Green,//left Shadow//
0-2PX 0 Blue,//top Shadow//
2px 0 0 Yellow,//Right Shadow//
0 2px 0 red; Bottom Shadow//
}

We used the multi-level Box-shadow pair of the four sides of the Box-shadow set, do not use the shadow blur radius, to add fuzzy values, will be able to see the effect:

. demo3{Box-shadow: -2px 0 5px green,0-2px 5px blue,2px 0 5px yellow,0 2px 5px Red;}

There is also a detail problem when using multi-layered shading, if the previous shadow blur value is greater than the shadow blur value behind it, the front shadow obscures the shadow effect behind it.

A large shadow blur will obscure the small shadow blur
. demo4{
　　Box-shadow: 0 0 15px red,0 0 5px Blue;
}

. demo5{
　　Box-shadow: 0 0 5px red,0 0 15px Blue;
}

Effect 2:4 edges have the same shadow effect (only shadow blur radius and shadow color are set)

. demo6{Box-shadow:0 0 5px RGB (255,0,0);}

You can also apply the CSS3 Rgba value to the shadow color of Box-shadow, so the benefit is that the Box-shadow shadow color is more than an alpha transparent value

. demo7{Box-shadow:0 0 5px Rgba (255,0,0,0.5);}

Effect 3:4 edges have the same shadow (only shadow expansion radius and shadow color are set)

. demo8{Box-shadow:0 0 0 5px Red;}

The boder:5px solid red with which we are in the element, the effect of the property is very similar, but continue to increase the value of the shadow extension radius with the border values, compared to the following

. demo9-1{Box-shadow:0 0 0 20px Red;}

. demo9-2{border:20px solid Red;}

Shadows do not affect any layout of the page, the shadow browser is ignored, and the border is counted in the width

Effect four: Inner shadow inset effect:

. demo10{Box-shadow:Inset 0 0 10px Red;}

The IMG tag directly applies Box-shadow's inset without any effect, the workaround is as follows

method One: use Box-shadow on IMG's parent Div, then we position the IMG relative to the next level of the parent element

. demo11{
width:240px;
height:170px;
Background:blue;
　　Box-shadow:inset 0 0 10px Red;
}
. demo11 Img{position:relative;z-index:-1;}

method Two: apply a pseudo-element ": Before" on the IMG parent element to achieve:

. demo12{
width:240px;
height:170px;
position:relative;
}
. demo12:before{
Content: "";
Position:absolute;
width:100%;
height:100%;
　　Box-shadow:inset 0 0 10px 1px red;
}

method Three: write the picture in the background background-images

. demo13{
margin:20px;
width:240px;
height:170px;
Background:url (images/box-shadow.jpg) no-repeat Center top;
　　Box-shadow:inset 0 0 10px 1px blue;
}

Effect Five: Add a shadow to the top of the body

body:before{
Content: "";
position:fixed;
top:-10px;
left:0px;
width:100%;
height:10px;
z-index:999;
　　Box-shadow:0 0 10px Rgba (125,255,125,0.8);
}

effect Six: Drop-shadow the curve projection effect of paper (implemented using the two pseudo-elements of the Box-shadow mate element: Before and: After and positioning)

. drop_shadow{
width:300px;
height:150px;
position:relative;
Background: #ccc;
}
. drop_shadow:before,.drop_shadow:after{
Content: "";
Position:absolute;
width:50%;
height:20%;
bottom:15px;
Z-index:-1;
　　Box-shadow:0 15px 10px rgba (125,125,125,0.8);
max-width:150px;
}
. drop_shadow:before{
left:10px;
Transform:rotate ( -3DEG);
}
. drop_shadow:after{
right:10px;
Transform:rotate (3DEG);
}

CSS3 Box-shadow