Detailed box-shadow

　　Today we explore what the "shadow."
　　This is not what the psychological shadow of a shadow. We explore the shadow of the shadow of graphics. Students can think about, the arrival of the shadows in the picture, or use the shadow, which provides special effects for our image? In high school we study art at the time, and that time in contact with sketches, to draw a cup, or draw a sphere, this time often appear teacher drew very realistic, three-dimensional, strong sense of hierarchy, although himself drawn up, in without deliberately stressed the premise easy for people to misunderstand (funny face).
　　After their lessons, we know what we want to draw an object, a three-dimensional, usually: highlights, shadows and gray-faced, projection (shadow), which is composed of several parts. After saying a shadow graph, to think about how to draw a shadow on our page. This involves the box-shadow we say about today in CSS3.
　　Explore box-shadow
　　earlier said that before the box-shadow, we take a look at a few pictures, specific and detailed feel the shadow box-shadow.

　　Like a sheet of paper (nonsense), a little shadow.

　　What? This is the shadow? (Do not take border deceive me okay ...)

　　This is also painted with box-shadow?
　　The above picture is indeed painted by box-shadow, students may be some small shock (a very subtle drawing, Figure III is very cool, a little joke Figure II). Next we come to officially explore the magic of black magic box-shadow! ! ! ! .
　　box-shadow literally called "shadow box", the literal translation of the results with the students of cognition is consistent. CSS box model in existence, in the shadow of chanting for box model. That is something we have to remember, in the shadow for the box (element), and later we will be highlighted.
　　box-shadow property value of 6 parts.
　　Syntax:
　　Shadow-Box: offset-X-Y offset Blur Spread Color position;
　　position here may be written on top. It can also be written in the final surface as above.
　　Next we look at these attributes provide what kind of function?
　　1.offset-x offset-y
　　horizontal offset-x for declaring offset shadow, the shadow is in the X-axis. When the value is positive, the shadows on the right elements, if the value is negative, the shadow on the left side element.
　　Similarly
　　vertical offset offset-y for declaring shadow, shadow position is in the Y-axis. When the value is positive on the upper side, the lower side of the shading element is located, if the value is negative, the shadow in element.
　　Examples:
　　the CSS:
　　.demo {
　　width: 100px;
　　height: 100px;
　　background: #fcc;
　　Box-Shadow: 10px10px;
　　}
　　Results:

　　With this we can see it is shaded, according to the above explanation can be seen (10px10px ) down shifted to the right 10 px, a negative value is shifted to the left upward empathy. Next we see the blur
　　2.blur
　　fuzzy blur radius represents shadows. And the effect of design software used in the same Gaussian blur filter. A value of 0 means that the shadow is completely blurred. The larger blur value, the less sharp corners, the shadow hazy. It does not allow a negative value, equivalent to 0. Modify our example above:
　　CSS:
　　Box-Shadow: 10px10px10px;
　　Results:

　　We can see the shadow blur.
　　It should be noted here is: W3C does not specify in what way browser vendors that implement blur effect, anyway, and Gaussian blur effect similar results it wants. But one thing we need to note that the effect will be to expand the area of fuzzy shadows.

　　Demo0 radius blur effect is 0, the shadow can be seen that exactly the same size and the element size. The demo1 is the blur radius of 10px effect, you can see the shadow size has expanded, and then expand demo2 get some more.
　　Now we recognize the emotional to the blur radius will expand the size of the shadow of greater than 0, then extended it in the end how much? Then we must first clear blurring start position happened. After visual observation, the starting position of each of the blurring occurs is the edge of the shadow box. The fact is the case. As the diffusion distance blurradius distance / 2 (blur radius). See demo2 dimensions have been shaded boxes to overlap with the element, because the left border of the shadow box diverges 15px the left, over the horizontal distance between Talia the 10px.
　　3.spread
　　in the Spread indicates the size of the shadow. When the value is positive, the shadow will be extended to four weeks. If the value is negative, the shadow will shrink less than the size of the element. The default value of 0 will remain consistent and shadow element size.
　　box-shadow: 0px0px0px10px;

　　in which we can see that when we spread is 10px, 10px margin They also coincide described spread is positive, (vertical and horizontal) + value spread in the original size. When the spread is negative, then the size of the far - spread value of
　　4.color
　　Color represents the color of the shadow. It can be any color units. This is nothing to say.
　　5.position
　　position represents the position of shadow, optional. The default is the outer shadow. You can be produced by using internal shadows inset keyword. External shading is not declare a default, want to use the internal shadow can finally declare inset in the front.
　　LikeThis:
　　Box-Shadow: inset0px0px0px10px # 0FF;
　　Effect:

　　It is clear shadow on the inside.
　　Next, we also analyze the spread and internal shadow blurradius.
　　Through the above chart we can see it.
　　When the value is a positive value for the spread, it can be seen from the hatched begins to fill boundary. As for the border from the border beginning, or from the padding to start?

　　CSS:
　　border: 10pxsolid # f0f;
　　padding: 10px;
　　Box-Shadow: inset0px0px0px10px # 0FF;
　　we can see
　　with Padding area as a starting point to expand the shadows inside. Extended radius value spread of negative does not make sense, no padding region start to content area.
　　Similar blurradius and spread here is not to demonstrate, for everyone to sum up, blur radius value or blurradius / 2 starting position with the spread, there is padding start padding the beginning, not the beginning of the content.
　　Here talk box-shadow level (z-index)
　　to the
　　outer shadows (default):

　　For outer shadows: High and magin below background.
　　For Inner Shadow: high with padding below the content.
　　Box-shadow can not only distinguish between internal and external shading can also, apply multiple shadows superimposed.
　　Each shaded with ',' spaced, LikeThis
　　the CSS:
　　width: 100px;
　　height: 100px;
　　background: #fcc;
　　padding: 10px;
　　border-RADIUS: 50%;
　　Box-Shadow: 120px0px0-10px # f0f,
　　95px10px00px # D00 ,
　　30px20px0-10px # cdd,
　　90px #-10px00px the Add,
　　40px #-30px00px the EDD;
　　result:

　　the level is written in the back. Because you can overlap so we can write a multi-border element

　　such as a prospective target. (This is that picture of the beginning emergence of reason).