如何解决将盒子阴影应用于Bootstrap 4卡组件
我正在尝试将简单的阴影应用于卡片组件。 阴影不知何故出现了毛刺,看起来像是被镜像和放错了位置。
我认为这与margin-bottom
有关,但还有很多我无法弄清。
让卡片有阴影的正确方法是什么?
https://jsfiddle.net/qdjeuo65/
<style>
.card {
box-shadow: 0 0 10px 0 rgba(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>
我的浏览器是Chrome 84。
解决方法
该问题导致您在column-count
类上使用card-columns
css属性。您可以使用弹性对齐卡或将transform: translateZ(0);
添加到.card
类中作为解决方法。
请向display: flex;
添加.card-columns
属性。这样可以解决您的问题。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。