CSS是網頁設計中不可或缺的一環，其功能強大，可以實現各種卡片效果。下面就讓我們一起來看一下如何用CSS制作卡片效果。

.card {
width: 300px;
height: 200px;
border-radius: 10px;
box-shadow: 2px 2px 10px rgba(0,0,0,0.3);
background-color: #fff;
padding: 20px;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.card:hover {
transform: scale(1.1);
box-shadow: 5px 5px 20px rgba(0,0,0,0.5);
}

以上代碼中設置了一個.card類，其寬度為300px，高度為200px，圓角為10px，投影效果為2px 2px 10px的灰色陰影，白色背景和內邊距20px，同時采用了Flex布局，使其內部內容在水平和垂直方向上都居中顯示。

當將鼠標懸停在.card上時，采用:hover偽類，將元素的縮放值變為1.1，同時投影效果變成了5px 5px 20px的深灰色陰影，給用戶帶來更加鮮明的視覺效果。

通過這種方式，我們可以快速地實現簡單的卡片效果，來為網頁增添更多的美感與互動性。