当前位置：首页 > CSS

css卡片制作

2026-02-13 01:03:36CSS

CSS卡片制作基础方法

使用HTML和CSS创建卡片式布局是常见的UI设计需求。以下是一个基本实现方案：

<div class="card">
  <img src="image.jpg" alt="卡片图片">
  <div class="card-content">
    <h3>卡片标题</h3>
    <p>卡片描述内容...</p>
    <button>点击按钮</button>
  </div>
</div>

.card {
  width: 300px;
  border: 1px solid #ddd;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  transition: transform 0.3s ease;
}

.card:hover {
  transform: translateY(-5px);
}

.card img {
  width: 100%;
  height: 200px;
  object-fit: cover;
}

.card-content {
  padding: 15px;
}

.card-content h3 {
  margin-top: 0;
  color: #333;
}

.card-content p {
  color: #666;
  line-height: 1.5;
}

.card-content button {
  background-color: #4285f4;
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: 4px;
  cursor: pointer;
}

响应式卡片设计

为适应不同屏幕尺寸，可添加媒体查询：

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

卡片悬停效果增强

提升交互体验的进阶效果：

.card {
  position: relative;
}

.card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom, transparent, rgba(0,0,0,0.1));
  opacity: 0;
  transition: opacity 0.3s ease;
}

.card:hover::before {
  opacity: 1;
}

卡片网格布局

多卡片排列的网格系统：

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

卡片阴影优化

更自然的阴影效果：

.card {
  box-shadow: 
    0 1px 2px rgba(0,0,0,0.07),
    0 2px 4px rgba(0,0,0,0.07),
    0 4px 8px rgba(0,0,0,0.07),
    0 8px 16px rgba(0,0,0,0.07);
}

卡片边框动画

添加边框动画效果：

css卡片制作

.card {
  position: relative;
  background: white;
}

.card::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border: 2px solid transparent;
  border-radius: 8px;
  pointer-events: none;
  transition: border-color 0.3s ease;
}

.card:hover::after {
  border-color: #4285f4;
}