How to realize the effect of curved Shadow and warped Shadow by css

This article "css how to achieve curved shadow and warped edge shadow effect" most people do not understand, so the editor summarized the following content, detailed, clear steps, with a certain reference value, I hope you can get something after reading this article, let's take a look at this "css how to achieve curved edge shadow and warped edge shadow effect" article.

First, curved shadow

The effect is as follows: it not only has a shadow around it, but also has a layer of curved edge shadow at the bottom. Its principle is actually very simple: first the box itself has a shadow, and then another shaded box is used to overlap to form a curved edge shadow in the effect picture.

First of all, let's talk about the usage syntax of box-shadow, which supports multiple shaded writing, separated by commas, as follows

Create a box and use box-shadow to give the box an outer shadow and an inner shadow with a zero halo radius of 10px in both the x-axis and y-axis.

Style {.box1 {width: 400px; height: 200px; background: white; border: 1px solid lightgrey; margin: 100px auto; text-align: center; line-height: 200px Box-shadow: 0 10px rgba, 0 10px rgba inset;} body {curved shadow}

Use the after pseudo-class selector to add a virtual tag after the box1 subset, which is not recognized by the browser, so you need to define the display attribute and shadow the tag. Because it is curved, you need to set border-radius to make it have a Radian. Then use positioning to overlap the virtual label with the original box, and use z-index to change the level so that it is below the div. 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; box-shadow: 10px; box-shadow: 0 8px 10px rgba;}

When there is no positioning, the two boxes are arranged as follows:

Curved shadow is realized after positioning: the result is as follows:

Second, warped edge shadow

The principle is the same as curved shadow, using pseudo-class selector:: afteryu,:: before to add two virtual tags, using shadow overlap to achieve edge-warping 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; transform: skewX (- 15deg);} .box2:: before {box-shadow:-20px 10px 40px rgba; transform: skewX (15deg);}

To make it easier for us to see, the red background is given, and the result is as follows when the hierarchy is not changed:

Adjust the level of the two boxes, and the effect is as follows:

The above is about "css how to achieve curved shadow and warped edge shadow effect" of this article, I believe we all have a certain understanding, I hope the content shared by the editor will be helpful to you, if you want to know more related knowledge content, please follow the industry information channel.