How to add Shadow effects to HTML
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.
