用css制作卡片

基础卡片结构

使用HTML创建卡片容器，CSS定义样式。HTML部分包含标题、图片和描述内容。

<div class="card">
  <img src="image.jpg" alt="示例图片">
  <div class="card-content">
    <h3>卡片标题</h3>
    <p>这里是卡片的描述文本。</p>
  </div>
</div>

卡片样式设计

通过CSS设置宽度、阴影、圆角等属性增强视觉效果。

.card {
  width: 300px;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  font-family: Arial, sans-serif;
  background: white;
}
.card img {
  width: 100%;
  height: 180px;
  object-fit: cover;
}
.card-content {
  padding: 16px;
}
.card h3 {
  margin: 0 0 8px;
  font-size: 1.2em;
}
.card p {
  margin: 0;
  color: #555;
}

悬停交互效果

添加悬停动画提升用户体验，例如阴影加深或轻微上浮。

.card:hover {
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
  transform: translateY(-4px);
  transition: all 0.3s ease;
}

响应式调整

通过媒体查询适应不同屏幕尺寸，确保移动端友好。

@media (max-width: 600px) {
  .card {
    width: 100%;
    margin-bottom: 16px;
  }
}

进阶样式选项

• 边框样式：使用border: 1px solid #eee替代阴影。
• 渐变背景：为卡片内容区域添加background: linear-gradient(...)。
• 自定义图标：在标题旁嵌入Font Awesome等图标库的图标。

.card-content {
  background: linear-gradient(to bottom, #f9f9f9, #fff);
}