如何在一组卡片CSS中提升单个卡片CSS

时间:2018-09-15 15:37:39

标签: html css

嗨,我需要设计帮助,我想提升一张看起来比其他卡片更高的卡片。我添加了阴影框,但只显示在所有卡片的后面。

enter image description here

这是我的html代码

<section id="returned-item">
    <div class="container">
        <div class="card ticket-item">
            <div class="row">
                <div class="col">
                    <p>This is a sample long lkdsjflkds jlds jdsjlksjflkjflkdsjdsjflkdsjf dslk jds lkfjds lkfj flkds jflkds jfdslk fjds lkfjds lkf jflkds jflkdsjds lkfjdslkjslk</p>
                </div>
                <div class="col-sm-2 text-right">
                    <div class="row">
                        <div class="col-sm-12">
                            <p>7:30 AM</p>
                        </div>
                        <div class="col"><i class="fa fa-check-circle ticket-status-icon"></i></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

这是我的CSS

#returned-item .container .card {
  box-shadow:0 8px 8px 8px rgba(0,0,0,.2), 0 8px 8px 0 rgba(0,0,0,.14), 0 8px 8px 0 rgba(0,0,0,.12) !important;
  transform:translate3d(0,0,0);
  transition:background .4s cubic-bezier(.25,.8,.25,1),box-shadow 280ms cubic-bezier(.4,0,.2,1);
}

我想让它看起来像这样

enter image description here

0 个答案:

没有答案