html - 使用 bootstrap 使价格表中的一列突出显示(3d 效果)

Question

我想在 Bootstrap 中创建这样的价格表 https://d85wutc1n854v.cloudfront.net/live/products/600x375/WB0PF9PH7.png?v=1.0如您所见，第 3 列 (pro) 上有 3d 效果。我如何制作这种 3d 效果？

这是我的代码，现在有四个平面列。没有额外的 CSS。

<section class="container show-source">
    <div class="row">
        <div class="col-md-3">
            <div class="panel panel-info">
                <div class="panel-heading">
                    <h3 class="text-center">Gratis testperiod</h3></div>
                <div class="panel-body text-center">
                    <p class="lead" style="font-size:40px"><strong>$15</strong></p>
                </div>
                <ul class="list-group list-group-flush text-center">
                    <li class="list-group-item"><i class="icon-ok text-danger"></i> Personal use</li>
                    <li class="list-group-item"><i class="icon-ok text-danger"></i> Unlimited projects</li>
                    <li class="list-group-item"><i class="icon-ok text-danger"></i> 27/7 support</li>
                </ul>
                <div class="panel-footer">
                    <a class="btn btn-lg btn-block btn-danger" href="#">BUY NOW!</a>
                </div>
                <!--/panel-footer-->
            </div>
            <!--/panel-->
        </div>
        <!--/col-->
        <div class="col-md-3">
            <div class="panel panel-info">
                <div class="panel-heading">
                    <h3 class="text-center">Pro Plan</h3></div>
                <div class="panel-body text-center">
                    <p class="lead" style="font-size:40px"><strong>$10</strong></p>
                </div>
                <ul class="list-group list-group-flush text-center">
                    <li class="list-group-item"><i class="icon-ok text-danger"></i> Personal use</li>
                    <li class="list-group-item"><i class="icon-ok text-danger"></i> Unlimited projects</li>
                    <li class="list-group-item"><i class="icon-ok text-danger"></i> 27/7 support</li>
                </ul>
                <div class="panel-footer">
                    <a class="btn btn-lg btn-block btn-danger" href="#">BUY NOW!</a>
                </div>
                <!--/panel-footer-->
            </div>
            <!--/panel-->
        </div>
        <div class="col-md-3">
            <div class="panel panel-info">
                <div class="panel-heading">
                    <h3 class="text-center">Pro Plan</h3></div>
                <div class="panel-body text-center">
                    <p class="lead" style="font-size:40px"><strong>$10</strong></p>
                </div>
                <ul class="list-group list-group-flush text-center">
                    <li class="list-group-item"><i class="icon-ok text-danger"></i> Personal use</li>
                    <li class="list-group-item"><i class="icon-ok text-danger"></i> Unlimited projects</li>
                    <li class="list-group-item"><i class="icon-ok text-danger"></i> 27/7 support</li>
                </ul>
                <div class="panel-footer">
                    <a class="btn btn-lg btn-block btn-danger" href="#">BUY NOW!</a>
                </div>
                <!--/panel-footer-->
            </div>
            <!--/panel-->
        </div>
        <!--/col-->
        <div class="col-md-3">
            <div class="panel panel-info">
                <div class="panel-heading">
                    <h3 class="text-center">Free Plan</h3></div>
                <div class="panel-body text-center">
                    <p class="lead" style="font-size:40px"><strong>$0</strong></p>
                </div>
                <ul class="list-group list-group-flush text-center">
                    <li class="list-group-item"><i class="icon-ok text-danger"></i> Personal use</li>
                    <li class="list-group-item"><i class="icon-ok text-danger"></i> Unlimited projects</li>
                    <li class="list-group-item"><i class="icon-ok text-danger"></i> 27/7 support</li>
                </ul>
                <div class="panel-footer">
                    <a class="btn btn-lg btn-block btn-danger" href="#">BUY NOW!</a>
                </div>
                <!--/panel-footer-->
            </div>
            <!--/panel-->
        </div>
        <!--/col-->
    </div>
    <!--/row-->
</section>

Answer 1

您必须像示例中那样缩放它的宽度和高度，并添加一个box-shadow

比如这个

box-shadow: 10px 10px 52px 13px rgba(0,0,0,0.75);