How to set shadow effect in css

css Set shadow effect: 1. Create a curved shadow effect by superimposing the shadow effects of the main element and the secondary element; 2. Add two secondary elements and twist and rotate the two secondary elements to the left respectively. After a small angle, a parallelogram is formed, and then covered under the main element to achieve the edge-warping shadow effect.

The operating environment of this article: Windows7 system, HTML5&&CSS3 version, Dell G3 computer.

Curve shadow:

The implementation principle of curve shadow is generated by the superposition effect of shadow. That is, after setting a shadow on a main element, add a secondary element below the main element. Make the secondary element coincide with the main element, and the secondary element is an arc element. At this time, the shadow effects of the main element and the secondary element are superimposed to produce curved shadows.

Step 1:

Add inner shadow to the main element, set the size of v and h directions to 0, but set the blur radius to be larger Large to achieve the shadow effect inside the main element.

Second step:

At this time, the attributes that need to be transformed for the sub-element are: added to the lower level of the main element level, implemented through z-index; adding sub-elements behind or in front of the main element ; The secondary element needs to be transformed into an arc: border-radius:100px/10px; determine the position of the secondary element through absolute positioning; add a shadow to the secondary element.

HTML:

<p class="wrap effect">
        <h1>Shawdow Effect</h1>
    </p>

CSS:

.effect{
    position: relative;
    box-shadow: 0px 1px 4px rgba(0,0,0,0.3),0px 0px 50px #ddd inset;
}
.effect:after,.effect:before{
    content: '';
    background: #fff;
    position: absolute;
    z-index: -1;
    left: 10px;
    right: 10px;
    top:50%;
    bottom: 0px;
    border-radius: 100px/10px;
    box-shadow: 0 0 20px rgba(0,0,0,0.8);
}

warping shadow:

warping The principle of edge shadow is similar to that of curve shadow, but edge shadow uses two attributes: distortion and rotation. The edge-warping shadow also adds two sub-elements on the left and right, and then twists the two sub-elements to the left and rotates them at a slightly smaller angle to form a parallelogram, and then covers them under the main element.

【Recommended learning: css video tutorial】

css

.box{
    width: 980px;
    height: auto;
    clear: both;
    overflow: hidden;
    margin: 20px auto;
}
.box li{
    width: 300px;
    height: 210px;
    float: left;
    background: white;
    margin: 20px 10px;
    border: 2px solid #efefef;
    box-shadow: 0 1px 4px rgba(0,0,0,0.27),0 0 60px rgba(0,0,0,0.1) inset;
    position: relative;
}
.box li img{
    display: block;
    width: 290px;
    height: 200px;
    margin: 5px;
}
.box li:before{
    content: '';
    z-index: -1;
    position: absolute;
    width: 90%;
    height: 80%;
    left: 20px;
    bottom: 8px;
    background:transparent;
    box-shadow: 0 8px 20px rgba(0,0,0,0.6);
    transform: skew(-12deg) rotate(-4deg);
}
.box li:after{
    content: '';
    z-index: -1;
    position: absolute;
    width: 90%;
    height: 80%;
    right: 20px;
    bottom: 8px;
    background:transparent;
    box-shadow: 0 8px 20px rgba(0,0,0,0.6);
    transform: skew(12deg) rotate(4deg);
}

The above is the detailed content of How to set shadow effect in css. For more information, please follow other related articles on the PHP Chinese website!