css怎么制作卡片

使用 CSS 制作卡片

基本卡片结构

HTML 结构通常由一个容器元素（如 div）和内部的内容元素（如标题、图片、描述等）组成：

<div class="card">
  <img src="image.jpg" alt="示例图片">
  <h3>卡片标题</h3>
  <p>卡片描述内容，可以包含多行文本。</p>
  <button>点击按钮</button>
</div>

基础卡片样式

通过 CSS 设置卡片的宽度、背景、边框和阴影等属性：

.card {
  width: 300px;
  background: white;
  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: 160px;
  object-fit: cover;
}

.card h3 {
  margin: 16px 16px 8px;
  font-size: 1.2rem;
}

.card p {
  margin: 0 16px 16px;
  color: #666;
  line-height: 1.5;
}

.card button {
  display: block;
  margin: 0 auto 16px;
  padding: 8px 16px;
  background: #007bff;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.card button:hover {
  background: #0056b3;
}

悬停动画效果

通过 transition 添加悬停时的缩放效果：

.card {
  transition: transform 0.3s ease;
}

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

响应式卡片

使用媒体查询适应不同屏幕尺寸：

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

卡片布局扩展

多卡片网格布局示例：

.card-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 20px;
  padding: 20px;
}

通过组合这些方法，可以快速创建美观且功能完整的卡片组件。根据实际需求调整颜色、尺寸和交互细节即可。