box-shadow usage

css3 add a lot of property, but not very learned three years ago using felt and will not use it, share it today, learning the way for them to learn together.

box-shadow property to add one or more shadow box;

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

Note: box-shadow to add one or more shadow frames. This attribute is a comma-separated list of shadows, shading each length value of 2-4, and optionally the optional color value of a predetermined keyword inset. Length value is 0 is omitted.

Description attribute values:

h-shadow: the size of the lateral shadow value (1px) on the right, the greater the value the greater the shadow; negative (-1px) on the left, the smaller value the larger the shadow, which are visible in the shadow of the top of the box; when when the value is 0, not visible in the shadow box below;

v-shadow: longitudinal size of the shadow, a positive value (1px) in the lower right side, the larger value the larger the shadow; negative (-1px) in the top, the smaller value the larger the shadow, which are visible in the shadow of the top of the box; when the value is 0, not visible in the shadow box below;

blur: the sharpness of the shadow, the larger the value the more blurred;

spread: the larger the value the more significant scale-out, the smaller the negative shrink inward, not visible in the box below;

color: color shading values;

inset: the shadow set, the default is not provided outside the shadow;

Method to realize:

div{

    margin:0 auto;

    width:200px;

    height:200px;

    background:purple;

    box-shadow:-11px 0;

    box-shadow:11px 0;

    box-shadow: 0 10px;

    box-shadow: 0 -10px;

    box-shadow: 3px 10px 10px 10px;

    box-shadow: 3px 10px 10px 10px yellow;

    box-shadow:inset -11px -20px -8px yellow;

  }

The above code I each attribute value is verified, according to the execution order, we can have the following comments, and be verified starting from the first order, the above code last I style my last shadow effect is provided, such as Figure:

 

 

 

application: