将盒子阴影应用于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属性。这样可以解决您的问题。