一、文字卡片效果
<html>
<head>
meta<charset="utf-8">
<title>文字卡片效果</title>
<style>
div.card {
width: 250px;
box-shadow: 04px8px0rgba(0, 0, 0, 0.2), 06px20px0rgba(0, 0, 0, 0.19);
text-align: center;
}
div.header {
background-color: #4CAF50;
color: white;
padding: 10px;
font-size: 40px;
}
div.container {
padding: 10px;
}
</style>
</head>
<body>
<h2>卡片</h2>
<p>box-shadow 属性用来可以创建纸质样式卡片:</p>
<divclass="card">
<divclass="header">
<h1>1</h1>
</div>
<divclass="container">
<p>January 1, 2016</p>
</div>
</div>
</body>
</html>
效果如下:
二、图片卡片效果
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>图片卡片效果</title>
<style>
div.imgcard{
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;
} div.container{
padding: 10px;
}
</style>
</head>
<body>
<div class="imgcard">
<img src="background.png" style="width:100%"/>
<div class="container">
<p>欢迎来到W星系</p>
</div>
</div>
</body>
</html>
效果如下:
特别说明:本系列持续连载,不定期分享更新,参考自菜鸟教程(一个神奇的网站)!!!