嗨,我需要设计帮助,我想提升一张看起来比其他卡片更高的卡片。我添加了阴影框,但只显示在所有卡片的后面。
这是我的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);
}
我想让它看起来像这样