首页 > 代码库 > 实现卡片效果【DIV+CSS3】
实现卡片效果【DIV+CSS3】
一、文字卡片效果
1 <html> 2 <head> 3 meta<charset="utf-8"> 4 <title>文字卡片效果</title> 5 <style> 6 div.card { 7 width: 250px; 8 box-shadow: 04px8px0rgba(0, 0, 0, 0.2), 06px20px0rgba(0, 0, 0, 0.19); 9 text-align: center; 10 }? 11 div.header { 12 background-color: #4CAF50; 13 color: white; 14 padding: 10px; 15 font-size: 40px; 16 }? 17 div.container { 18 padding: 10px; 19 } 20 </style> 21 </head> 22 <body> 23 <h2>卡片</h2> 24 <p>box-shadow 属性用来可以创建纸质样式卡片:</p>? 25 <divclass="card"> 26 <divclass="header"> 27 <h1>1</h1> 28 </div> 29 <divclass="container"> 30 <p>January 1, 2016</p> 31 </div> 32 </div>? 33 </body> 34 </html>
效果如下:
二、图片卡片效果
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>图片卡片效果</title> 6 <style> 7 div.imgcard{ 8 width: 250px; 9 box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19); 10 text-align: center; 11 } 12 13 div.container{ 14 padding: 10px; 15 } 16 </style> 17 </head> 18 <body> 19 <div class="imgcard"> 20 <img src="background.png" style="width:100%"/> 21 <div class="container"> 22 <p>欢迎来到W星系</p> 23 </div> 24 </div> 25 </body> 26 </html>
效果如下:
特别说明:本系列持续连载,不定期分享更新,参考自菜鸟教程(一个神奇的网站)!!!
实现卡片效果【DIV+CSS3】
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。