3

我正在尝试将简单的阴影应用于卡片组件。不知何故，阴影出现故障，看起来像镜像和错位。

我认为这与它有关，margin-bottom但还有更多我无法弄清楚。

让卡片有阴影的正确做法是什么？

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>

我的浏览器是 Chrome 84。

在此处输入图像描述

4

2 回答 2

4

该问题导致您在类column-count上使用的 css 属性。card-columns您可以将卡片与 flex 对齐或添加transform: translateZ(0);到.card类中作为一种解决方法。

于 2020-08-13T19:42:17.753 回答
1

请将display: flex;属性添加到.card-columns. 这将解决你的问题。

于 2020-08-13T19:39:10.043 回答