最近學習CSS，偶然發現了一種不錯的名片效果圖，于是就來分享一下。

.card {
width: 200px;
height: 300px;
background: #fff;
box-shadow: 0px 0px 5px rgba(0,0,0,0.5);
border-radius: 10px;
overflow: hidden;
}
.card img {
width: 100%;
height: 50%;
object-fit: cover;
}
.card-info {
padding: 20px;
}
.card-info h2 {
margin: 0;
}
.card-info p {
margin-top: 10px;
font-size: 14px;
line-height: 1.5;
}
.card-social {
display: flex;
justify-content: center; 
margin-top: 20px;
}
.social-link {
display: inline-block;
width: 40px;
height: 40px;
margin: 0 10px;
border-radius: 50%;
text-align: center;
line-height: 40px;
transition: all 0.3s ease;
}
.social-link:hover {
background: #333;
color: #fff;
}

以上是CSS代碼，需要說明的幾個點：

1. 名片的整體結構使用了一個div，設置了寬高及其他必要的樣式屬性。名片的內容部分再使用一個div。

2. 名片的圖片部分使用了img標簽，樣式里用了object-fit: cover，讓圖片在保持寬高比的同時填充整個區域。

3. 名片的文字部分使用了一個div，內部采用了h2及p標簽。注意p標簽的樣式里設置了行高，讓文字更加整齊。

4. 名片的社交媒體鏈接部分使用了一個div，并使用了flex布局，在內部使用鏈接的a標簽，設置了基本樣式及hover后的背景顏色和文字顏色。

5. 當然，這僅僅是一個基本的名片效果，還可以根據實際情況添加其他樣式或者以此為基礎進行更多的樣式調整。