当前位置：首页 > CSS

css制作卡片教程

2026-03-12 12:39:37CSS

基础卡片结构

使用HTML创建卡片的基本结构，包含标题、内容和图片等元素。以下是一个简单示例：

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

基本样式设计

通过CSS为卡片添加基础样式，包括宽度、边框和阴影效果：

.card {
  width: 300px;
  border: 1px solid #ddd;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  overflow: hidden;
  font-family: Arial, sans-serif;
}
.card img {
  width: 100%;
  height: auto;
}
.card-content {
  padding: 15px;
}

悬停效果增强

添加交互效果使卡片更具动态感：

.card {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.card:hover {
  transform: translateY(-5px);
  box-shadow: 0 6px 12px rgba(0,0,0,0.15);
}

卡片布局变体

创建不同风格的卡片布局，如图文并排式：

.card.horizontal {
  display: flex;
  width: 500px;
}
.card.horizontal img {
  width: 40%;
  height: auto;
  object-fit: cover;
}
.card.horizontal .card-content {
  width: 60%;
}

高级样式技巧

为卡片添加渐变背景和更精细的排版：

.card.premium {
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
}
.card.premium .card-content h3 {
  color: #2c3e50;
  border-bottom: 2px solid #3498db;
  padding-bottom: 8px;
}
.card.premium .card-content p {
  color: #34495e;
  line-height: 1.6;
}

响应式设计

确保卡片在不同设备上都能正常显示：

css制作卡片教程

@media (max-width: 600px) {
  .card {
    width: 90%;
    margin: 0 auto;
  }
  .card.horizontal {
    flex-direction: column;
    width: 90%;
  }
  .card.horizontal img {
    width: 100%;
  }
}