Box-shadow and box-shadow

Box-shadow and box-shadow
1. box-shadow Parameter Parsing

box-shadow:none;

box-shadow: h-shadow v-shadow blur spread color inset;

Box-shadow Parameter Parsing

Value	Description
None	Default value. The element has no shadow effect.
H-shadow	Horizontal offset of shadow. The value can be positive or negative. If a positive value is obtained, the shadow is on the right side of the element. If a negative value is obtained, the shadow is on the left side of the element.
V-shadow	The vertical offset of the Shadow. The value can be positive or negative. If a positive value is obtained, the shadow is at the bottom of the element. If a negative value is obtained, the shadow is at the top of the element.
Blur	Shadow blur radius. Optional. The value can only be a positive value. If the value is 0, the shadow does not have a blur effect. If the value is greater, the edge of the shadow is blurred.
Spread	Radius of the Shadow extension. Optional. The value can be positive or negative. If the value is positive, the entire Shadow is extended. If the value is negative, the entire Shadow is reduced.
Color	Shadow color, an optional parameter. If no color is set, the browser will take the default color, but the default color of each browser is different, especially in the Webkit kernel, the browser will be colorless, that is, transparent, we recommend that you do not omit this parameter.
Inset	Shadow type. Optional values. If this parameter is not set, the default projection method is the external shadow. If the unique value "inset" is used, the inner shadow is set for the element.

See http://blog.csdn.net/baidu_31345523/article/details/50264869 here

2. box-shadow Application

Before explaining our application, we recommend a website

The effect we will do next is as follows:

Note that the border shadow of the orange box is left on the white box model in this area. How can this effect be achieved?

<div class="contain">    <div class="contain-wrapper">            </div>    <div class="foot-wrapper">            </div></div>    

Our html code is like this. Obviously, the green area is contain, the orange is contain-wrapper, and the white is foot-wrapper.
Let's write their css code.

*{    margin:0;    padding: 0;}.contain{    overflow: hidden;    margin: 0 auto;    width: 250px;    height: 300px;    background-color: #09b800;}.contain-wrapper{    margin: 0 auto;    margin-top: 10px;    width: 200px;    height: 100px;    background: #ff7e00;    border-radius: 10px;    box-shadow: 0px 9px 15px -1px rgba(0,0,0,0.3);}.foot-wrapper{    margin: 0 auto;    width: 180px;    height: 100px;    background: white;}

We set a border shadow for the orange box. The bottom border of the orange box is closely pasted with the top border of the white box. At this time, the problem arises. Let's take a look at the effect.

 

We found that the shadow of the Bottom Border of the orange box was covered by the white box. How can this problem be solved? I used a very cumbersome solution.

Since the shadow is hidden, let the white box compensate the orange box for a shadow. Isn't there a parameter called inset? We will project the shadow of the upper border of the white box to the inside. Isn't it good to fill in this vacancy?

 

* {Margin: 0; padding: 0 ;}. contain {overflow: hidden; margin: 0 auto; width: 250px; height: 300px; background-color: #09b800 ;}. contain-wrapper {margin: 0 auto; margin-top: 10px; width: 200px; height: 100px; background: # ff7e00; border-radius: 10px; box-shadow: 0px 9px 15px-1px rgba (0.3, 0 );}. foot-wrapper {margin: 0 auto; width: 180px; height: 100px; background: white; box-shadow: inset 0 9px 5px -1px rgba (0.1, 0,); // new. All other parameters must be the same as the shadow of the orange box, but only change the direction, this will not affect the combined effect .}