我想在bootstrap https://d85wutc1n854v.cloudfront.net/live/products/600x375/WB0PF9PH7.png?v=1.0中创建一个这样的价格表，你可以看到第3列（专业版）有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>
答案 0 :(得分：0)
您必须按照示例缩放width和height，然后添加box-shadow
例如这个
box-shadow: 10px 10px 52px 13px rgba(0,0,0,0.75);
答案 1 :(得分：0)
以5美元购买，它拥有您需要的所有代码，似乎是图像的来源。
https://wrapbootstrap.com/theme/responsive-pricing-tables-WB0PF9PH7
答案 2 :(得分：0)
这是一个非常简单的JSFiddle，它可以帮助你：https://jsfiddle.net/DTcHh/23628/
JSFiddle有三个主要组件：
将Bootstrap网格的装订线设为0：将以下类.no-gutter与类.row一起添加
.no-gutter > [class*='col-'] {
padding-right:0;
padding-left:0;
}
zoom要弹出的列
设置box-shadow
对于第2步和第3步，我为要弹出的列设置了ID，如下所示：
#pop {
zoom: 1.1;
z-index: 100;
top: -20px;
-webkit-box-shadow: 0px 0px 20px 5px rgba(0,0,0,0.3);
-moz-box-shadow: 0px 0px 20px 5px rgba(0,0,0,0.3);
box-shadow: 0px 0px 20px 5px rgba(0,0,0,0.3);
}
希望这可以帮到你！
答案 3 :(得分：0)
<body>
<div id="main-content">
<div class="container-fluid">
<div class="row-fluid">
<div class="span12">
<div class="widget black">
<div class="widget-body">
<div class="row-fluid">
<div class="span3">
<div class="pricing-table terques">
<div class="pricing-head">
<h3> Micro </h3>
<h4>
<span class="note">$</span>20 <span>Per Month</span></h4>
</div>
<ul>
<li><strong>Free</strong> setup</li>
<li><strong>1</strong> Website</li>
<li><strong>2</strong> Projects</li>
<li><strong>1GB</strong> Storage</li>
<li><strong>$0</strong> Google Adwords Credit</li>
</ul>
<div class="price-actions">
<a href="javascript:;" class="btn">Purchase Now</a>
</div>
</div>
</div>
<div class="spance10 visible-phone"></div>
<div class="span3">
<div class="pricing-table red">
<div class="pricing-head">
<h3> Starter </h3>
<h4>
<span class="note">$</span>30 <span>Per Month</span></h4>
</div>
<ul>
<li><strong>Free</strong> setup</li>
<li><strong>5</strong> Website</li>
<li><strong>10</strong> Projects</li>
<li><strong>15GB</strong> Storage</li>
<li><strong>$30</strong> Google Adwords Credit</li>
</ul>
<div class="price-actions">
<a href="javascript:;" class="btn">Purchase Now</a>
</div>
</div>
</div>
<div class="spance10 visible-phone"></div>
<div class="span3">
<div class="pricing-table green most-popular">
<div class="pricing-head ">
<h3> Business </h3>
<h4>
<span class="note">$</span>60 <span>Per Month</span></h4>
</div>
<ul>
<li><strong>Free</strong> setup</li>
<li><strong>10</strong> Website</li>
<li><strong>20</strong> Projects</li>
<li><strong>Unlimited</strong> Storage</li>
<li><strong>$50</strong> Google Adwords Credit</li>
</ul>
<div class="price-actions">
<a href="javascript:;" class="btn">Purchase Now</a>
</div>
</div>
</div>
<div class="spance10 visible-phone"></div>
<div class="span3">
<div class="pricing-table purple">
<div class="pricing-head">
<h3> Enterprise </h3>
<h4>
<span class="note">$</span>120 <span>Per Month</span></h4>
</div>
<ul>
<li><strong>Free</strong> setup</li>
<li><strong>20</strong> Website</li>
<li><strong>30</strong> Projects</li>
<li><strong>Unlimited</strong> Storage</li>
<li><strong>$100</strong> Google Adwords Credit</li>
</ul>
<div class="price-actions">
<a href="javascript:;" class="btn">Purchase Now</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
和头部使用，
<head>
<link href="css/bootstrap.min.css" rel="stylesheet" />
<link href="css/bootstrap-responsive.min.css" rel="stylesheet" />
<link href="css/bootstrap-fileupload.css" rel="stylesheet" />
<link href="css/font-awesome.css" rel="stylesheet" />
<link href="css/style.css" rel="stylesheet" />
<link href="css/style-responsive.css" rel="stylesheet" />
<link href="css/style-default.css" rel="stylesheet" id="style_color" />
</head>
创建css文件夹并保存上面提到的css页面..