隨著CSS3的大規模應用，卡片效果在頁面中逐漸成為一種流行的設計元素。CSS3卡片效果不僅具有靈活性、對響應式設計友好，而且易于實現。下面，我們將介紹幾種常見的卡片效果，并給出css代碼示例。

1. 陰影卡片效果

陰影卡片效果，是目前最常見的卡片效果之一。通過給卡片添加box-shadow屬性，即可實現類似于3D凸出效果的陰影卡片。

.card {
width: 200px;
height: 200px;
background: #fff;
box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.3);
}

2. 邊框卡片效果

邊框卡片效果，是一種簡潔、美觀的卡片設計。通過為卡片添加邊框屬性，可以讓卡片在顏色和大小上變得更加突出。

.card {
width: 200px;
height: 200px;
background: #fff;
border: 2px solid #8e44ad;
border-radius: 10px;
box-sizing: border-box;
}

3. 漸變卡片效果

漸變卡片效果，是一種非常醒目的卡片設計。通過為卡片添加線性漸變或徑向漸變背景，可以讓卡片的顏色更加豐富、明亮。

.card {
width: 200px;
height: 200px;
background: linear-gradient(to bottom, #16a085, #2980b9);
border-radius: 10px;
}

通過上述代碼示例，我們可以看到，使用CSS3卡片效果能夠快速實現具有豐富效果的卡片設計。在使用時，我們還可以根據設計需要進行調整，使頁面卡片效果更加出眾、美觀。