AutoCAD 3DMAX C语言 Pro/E UG JAVA编程 PHP编程 Maya动画 Matlab应用 Android
Photoshop Word Excel flash VB编程 VC编程 Coreldraw SolidWorks A Designer Unity3D
 首页 > css教程

分享CSS3制作卡片式图片的方法
51自学网 http://www.wanshiok.com
CSS3,卡片式,图片

先看看效果图：

XML/HTML Code复制内容到剪贴板
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4. <style>  
  5. body {margin:25px;}   
  6. div.polaroid {   
  7.   width: 40%;   
  8.   background-color: white;   
  9.   box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);   
  10.   margin-bottom: 25px;   
  11. }   
  12. div.container {   
  13.   text-align: center;   
  14.   padding: 10px 20px;   
  15. }   
  16. </style>  
  17. </head>  
  18. <body>  
  19. <h2>响应式卡片</h2>  
  20. <div class="polaroid">  
  21.   <img src="rock600x400.jpg" alt="Norway" style="width:100%">  
  22.   <div class="container">  
  23.     <p>The Troll's tongue in Hardanger, Norway</p>  
  24.   </div>  
  25. </div>  
  26. </body>  
  27. </html>  
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持wanshiok.com。
CSS3,卡片式,图片 　

上一篇：详解IE浏览器的haslayout属性及相关兼容性问题解决  下一篇：CSS3制作缩略图的详细过程
　
CAD教程 教师招聘 招聘信息 　 　 　
51自学网 我要自学网视频教程,视频下载 自学网 自学编程网 CAD自学网 PS自学网 www.wanshiok.com网站地图