CSS 可以讓我們輕松地創建美麗的帶圖片的卡片。

.card {
border: 1px solid #ddd;
border-radius: 5px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
padding: 20px;
width: 300px;
margin: 20px;
}
.card img {
border-radius: 5px;
max-width: 100%;
}
.card h2 {
margin-top: 0;
}
.card p {
font-size: 16px;
line-height: 1.5;
margin-bottom: 10px;
}

我們先創建一個名為 .card 的 CSS 類，它將為每個卡片添加邊框、圓角和陰影。
接著，我們對卡片中的圖片應用樣式，使其具有圓角并且保持其最大寬度不超過其容器。
最后，我們定義了 h2 和 p 元素的樣式，使其看起來更加美觀且易于閱讀。

現在，我們可以將這些樣式應用到我們的 HTML 卡片中：

<div class="card">
<img src="card-image.jpg" alt="Card Image">
<h2>Card Title</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>

通過這些 CSS 樣式，我們可以創建出優美且易于使用的帶圖片的卡片。這種卡片在網站中非常流行，因為它可以很好地呈現信息和內容。