CSS3案例：创建纸质样式卡片

来自CloudWiki
跳转至： 导航， 搜索 
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>box-shadow</title> 
<style>
div.polaroid 
{
  width:250px;

  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  text-align: center;
  float:left;
  margin-right:20px;
}
.polaroid img{width:250px; height:150px;}
div.container 
{
  padding: 10px;
}
</style>
</head>
<body>
<h2>产品图片列表</h2>
<div class="polaroid">
  <img src="images/3.gif">
  <div class="container">
    <p>产品名称</p>
  </div>
</div>

<div class="polaroid">
  <img src="images/4.jpg">
  <div class="container">
    <p>产品名称</p>
  </div>
</div>

<div class="polaroid">
  <img src="images/2.jpg">
  <div class="container">
    <p>产品名称</p>
  </div>
</div>
</body>
</html>
取自“http://www.openbrains.net/mediawiki/index.php?title=CSS3案例：创建纸质样式卡片&oldid=16132”