CSS3 中的 box-shadow 屬性適用於盒子陰影,也可用來創建卡片。
範例:
<!DOCTYPE html>
<html>
<head>
<title>CSS css3 box-shadow</title>
<meta charset="utf-8">
<style type="text/css">
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;
}
div.container {
padding: 10px;
}
</style>
</head>
<body>
<h2>卡片</h2>
<p>box-shadow屬性可用來創建卡片</p>
<div class="polaroid">
<img src="newyear2018.png" alt="Norway" style="width:100%">
<div class="container">
<p>Happy 2018 to you</p>
</div>
</div>
</body>
</html>
結果如下圖: