Sometimes, we want to create a CSS3 box-shadow on all sides but one.
In this article, we’ll look at how to create a CSS3 box-shadow on all sides but one.
How to create a CSS3 box-shadow on all sides but one?
To create a CSS3 box-shadow on all sides but one, we set overflow to hidden.
For instance, we write
<div><div>tab</div></div>
to add nested divs.
Then we write
div div {
box-shadow: 0 0 5px #000;
height: 20px;
}
div {
overflow: hidden;
height: 25px;
padding: 5px 5px 0 5px;
}
to add box shadow to the nested div.
And we cut off the box shadow on the bottom with overflow: hidden;.
Conclusion
To create a CSS3 box-shadow on all sides but one, we set overflow to hidden.
