How the shadow Effect of Box-shadow is used

This time to everyone to bring Box-shadow shadow effect how to use, the use of Box-shadow shadow effect of the attention to what, the following is the actual case, take a look.

We all know that Box-shadow is a h5 new attribute, used to achieve the effect of shadow on the edge of the box, but often see a lot of scenes in the shadow of a variety of styles, not simply the effect of the shadow around, how they are implemented, today to share with you two ways to implement the shadow.

The shadow of a curved edge

As follows: It is not only the shadow of the surrounding, but also a layer of curved edge of the shadow, its principle is very simple, first of all the box itself has a shadow, and then in the use of another shaded box overlapping the formation of the curved edge shadow.

First of all, the use of Box-shadow syntax, it supports the writing of multiple shadows, separated by commas, as follows

Create a box, use Box-shadow to give the box an x-axis and a y-axis direction are 0 halo radius of 10px outer Shadow and inner shadow.

style{      . box1{                width:400px;                height:200px;                Background:white;                border:1px solid Lightgrey;                margin:100px Auto;                Text-align:center;                line-height:200px;                box-shadow:0 0 10px Rgba (0,0,0,0.3), 0 0 10px Rgba (0,0,0,0.3) inset;        } body{      <p class= "Box1" >      <span> Curved edge Shadows </span>      </p>}

Using the after pseudo-class selector to add a virtual label after the Box1 subset, because it is a virtual label, the browser does not recognize, you need to define the display property, the label is also shaded, because it is a curved surface, so you need to set Border-radius so that it has a radian. Then use positioning to overlap the virtual label with the original box and use Z-index to change the hierarchy so that it is below p. The code is as follows

. box1::after{                Display:block;  Must write                content: "";     Must write                Z-index:-1;                width:390px;                height:150px;                background:red;                Position:absolute;                bottom:0;                left:4px;                border-radius:30px/10px;                box-shadow:0 8px 10px Rgba (0,0,0,0.3);                            }

When there is no positioning, the two boxes are arranged in the following way:

The curved edge shadow is achieved after positioning: The result graph is as follows:

Second, the shadow of the upturned edge

The principle is the same as the curved edge shadow, using Pseudo-class selectors:: Afteryu,:: Before Add two virtual tags, and use the overlap of shadows to achieve the edge shadow.
The code is as follows:

. box2::after,.box2::before{                Display:block;                Content: "";                Z-index:-1;                width:170px;                height:240px;                background:red;                Position:absolute;                bottom:20px;                left:38px;                box-shadow:30px 10px 40px Rgba (0,0,0,0.5);                 Transform:skewx ( -15deg);               }            . box2::before{                Box-shadow: -20px 10px 40px Rgba (0,0,0,0.5);                    Transform:skewx (15deg);                }

To make it easier for us to see, given a red background, the result is as follows:

Adjust the level of the two boxes to the following results:

Believe that you have read the case of this article you have mastered the method, more exciting please pay attention to the PHP Chinese network other related articles!

Recommended reading:

CSS3 pointer-events use of the detailed