网页制作 
首页 > 网页制作 > 浏览文章

分享CSS3制作卡片式图片的方法

(编辑：jimmy 日期: 2024/11/16 浏览：3 次 )

先看看效果图：

分享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>  
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
上一篇：详解IE浏览器的haslayout属性及相关兼容性问题解决
下一篇：CSS3制作缩略图的详细过程
一句话新闻
微软与英特尔等合作伙伴联合定义“AI PC”：键盘需配有Copilot物理按键
几个月来，英特尔、微软、AMD和其它厂商都在共同推动“AI PC”的想法，朝着更多的AI功能迈进。在近日，英特尔在台北举行的开发者活动中，也宣布了关于AI PC加速计划、新的PC开发者计划和独立硬件供应商计划。
在此次发布会上，英特尔还发布了全新的全新的酷睿Ultra Meteor Lake NUC开发套件，以及联合微软等合作伙伴联合定义“AI PC”的定义标准。