当前位置：首页 > CSS

css制作卡片

2026-03-11 18:25:51CSS

基础卡片结构

使用HTML创建卡片容器，包含标题、内容和图片等元素：

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

卡片样式设计

通过CSS设置卡片的尺寸、阴影和圆角等视觉效果：

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: 160px;
  object-fit: cover;
}
.card-content {
  padding: 16px;
}
.card h3 {
  margin: 0 0 8px 0;
  color: #333;
}
.card p {
  margin: 0;
  color: #666;
}

悬停交互效果

添加悬停动画增强用户体验：

css制作卡片

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

响应式调整

通过媒体查询适配不同屏幕尺寸：

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

高级样式变体

创建带边框和渐变背景的卡片变体：

.card-variant {
  border: 1px solid #e0e0e0;
  background: linear-gradient(to bottom, #f9f9f9, #fff);
}
.card-variant .card-content {
  border-top: 1px dashed #ddd;
}