Shulou(Shulou.com)06/01 Report--

This article is a detailed introduction to "how to add shadow effect to HTML". The content is detailed, the steps are clear, and the details are properly handled. I hope this article "how to add shadow effect to HTML" can help you solve your doubts. Let's go deeper and learn new knowledge together with the ideas of Xiaobian.

You can also add shadow effects to::before and::after pseudo-elements

examples

#boxshadow {

position: relative;

b ox-shadow: 1px 2px 4px rgba(0, 0, 0, .5);

pa dding: 10px;

bac kground: white;

}

#boxshadow img {

width: 100%;

border: 1px solid #8a4419;

border-style: inset;

}

#boxshadow::after {

content: '';

position: absolute;

z-index: -1; /* hide shadow behind image */

box-shadow: 0 15px 20px rgba(0, 0, 0, 0.3);

width: 70%;

left: 15%; /* one half of the remaining 30% */

height: 100px;

bottom: 0;

}

A special case of shadow use is the card effect

examples

div.card {

width: 250px;

box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);

text-align: center;

}

Read here, this article "how to add shadow effect HTML" article has been introduced, want to master the knowledge of this article also need to practice to understand, if you want to know more related content of the article, welcome to pay attention to the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.