html - 使用 bootstrap 使价格表中的一栏突出(3D效果)

我想在引导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>

最佳答案

例如，您必须按比例缩放width和height并添加box-shadow

例如这个

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