I'm trying to apply a simple shadow to a cards component. Somehow the shadow glitches and looks mirrored and misplaced.
I think it has to do with margin-bottom
but there's more to it I can't figure out.
What is the correct approach to let cards have a shadow?
https://jsfiddle.net/qdjeuo65/
<style>
.card {
box-shadow: 0 0 10px 0 rgba(100, 100, 100, 0.26);
}
</style>
<div class="card-columns">
<div class="card">
<div class="card-body">
<div class="card-title">title</div>
<div class="card-text">
body
</div>
</div>
<div class="card-footer">
footer
</div>
</div>
<div class="card">
<div class="card-body">
<div class="card-title">title</div>
<div class="card-text">
body
</div>
</div>
<div class="card-footer">
footer
</div>
</div>
<div class="card">
<div class="card-body">
<div class="card-title">title</div>
<div class="card-text">
body
</div>
</div>
<div class="card-footer">
footer
</div>
</div>
</div>
My browser is Chrome 84.
The problem causes the column-count
css property that you use on the card-columns
class. You can align cards with flex or add transform: translateZ(0);
to the .card
class as a workaround.
Please add display: flex;
property to .card-columns
. That will solve your problem.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.