如何 - 卡片
瞭解如何使用 CSS 建立“卡片”。
John Doe
建築師 & 工程師
Jane Doe
室內設計師
如何建立卡片
步驟 1) 新增 HTML
示例
<div class="card">
<img src="img_avatar.png" alt="頭像" style="width:100%">
<div class="container">
<h4><b>約翰·多伊</b></h4>
<p>建築師 & 工程師</p>
</div>
</div>
步驟 2) 新增 CSS
示例
.card {
/* 新增陰影以建立“卡片”效果 */
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
transition: 0.3s;
}
/* 滑鼠懸停時，新增更深的陰影 */
.card:hover {
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
}
/* 在卡片容器內新增一些內邊距 */
.container {
padding: 2px 16px;
}
自己動手試一試 »
帶圓角的
示例
.card {
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
transition: 0.3s;
border-radius: 5px; /* 5px 圓角 */
}
/* 給圖片左上角和右上角新增圓角 */
img {
border-radius: 5px 5px 0 0;
}
自己動手試一試 »
提示：請訪問我們的 CSS 陰影效果教程 瞭解更多關於陰影的資訊。
