CSS3实现Drop-shadow_html/css_WEB-ITnose

We can achieve the cool Drop-shadow effect through box-shdow and transform in CSS3:

The implementation steps are recorded below.

DOM structure

We only need a div as the main body, and the shadow can be achieved with the help of pseudo elements: before and :after. So our DOM structure is very simple.

<div class="drop-shadow">drop shadow effect</div>

Add shadows

Add shadows to the two pseudo-elements. Do the left one for now and deal with the right shadow later.

.drop-shadow:before, .drop-shadow:after {   content: "";   position: absolute;   z-index: -1;   bottom: 15px;   left: 10px;   width: 50%;   height: 20%;   box-shadow: 0 15px 20px rgba(125, 125, 125, 0.8); }

Now, what we see is this:

Adjust the shadow

Next we use transform to rotate the angle of the shadow. , which looks more three-dimensional.

.drop-shadow:before, .drop-shadow:after {   content: "";   position: absolute;   z-index: -1;   bottom: 15px;   left: 10px;   width: 50%;   height: 20%;   box-shadow: 0 15px 20px rgba(125, 125, 125, 0.8);   transform: rotate(-5deg); }

In this way we have completed the production of one side:

Adjust the shadow

Next, we only need to move one of the shadows Just go to the right.

.drop-shadow:after {   right: 10px;   left: auto;   transform: rotate(5deg); }

In this way, the shadow on the left is flipped to the right, and you’re done: