当前位置：首页 > CSS

css制作展示卡

2026-04-01 18:25:01CSS

CSS 制作展示卡

展示卡（Card）是现代网页设计中常见的组件，用于展示产品、文章或其他内容。以下是几种实现方式：

基础卡片样式

使用 div 元素创建基础卡片结构，通过 CSS 添加阴影、圆角和内边距：

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

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

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

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

.card-content {
  padding: 16px;
}

响应式卡片布局

使用 CSS Grid 或 Flexbox 创建响应式卡片网格：

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

卡片悬停效果

添加悬停动画增强交互体验：

.card {
  position: relative;
}

.card::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.2);
  opacity: 0;
  transition: opacity 0.3s;
}

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

卡片内容排版

优化卡片内部内容的排版：

.card-content h3 {
  margin: 0 0 10px 0;
  font-size: 1.2rem;
  color: #333;
}

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

高级卡片变体

创建带标签或图标的卡片：

css制作展示卡

<div class="card premium">
  <span class="badge">Premium</span>
  <!-- 卡片内容 -->
</div>

.badge {
  position: absolute;
  top: 10px;
  right: 10px;
  background: gold;
  padding: 4px 8px;
  border-radius: 4px;
  font-weight: bold;
}

.card.premium {
  border: 2px solid gold;
}

这些方法可以根据具体需求组合使用，通过调整颜色、间距和动画效果创建各种风格的展示卡。

标签: css