基于纯 CSS 实现简洁名片卡片设计

注意：请替换为您的实际图片路径。

HTML 结构分析

首先，让我们看看基础的 HTML 结构：

<div class="card">
  <img src="../image/了不起的盖茨比.jpg" alt="" class="logo">
  <p class="writer">OverThinker</p>
  <p class="introduce">欢迎来到我的博客</p>
</div>

这个结构非常简单明了：

1. 一个 div 容器作为卡片主体
2. 一个圆形头像图片
3. 两个段落文本分别显示名称和简短介绍

CSS 样式详解

1. 全局重置与基础设置

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  background-color: #daf1e2;
}

• * 选择器重置了所有元素的外边距和内边距，确保在不同浏览器中表现一致
• box-sizing: border-box 让元素的宽度和高度包含边框和内边距，更符合直觉
• 设置了柔和的浅绿色背景 (#daf1e2) 作为整个页面的底色

2. 卡片容器样式

.card {
  margin: 30px auto;
  width: 250px;
  height: 250px;
  background-color: #000;
  text-align: center;
  border-radius: 25px;
  padding-top: 35px;
}

• margin: 30px auto：上下边距 30px，左右自动居中
• 固定宽高 250px 的正方形
• 黑色背景 (#000)
• 内容居中对齐
• border-radius: 25px 创建圆角效果
• padding-top: 35px 顶部内边距，使内容下移

3. 头像图片样式

.logo {
  margin-bottom: 20px;
  width: 90px;
  height: 90px;
  border-radius: 50%;
}

• 固定宽高 90px 的正方形
• border-radius: 50% 将其变为圆形
• 底部外边距 20px，与下方文字保持距离

4. 文字样式

.writer {
  font: normal 700 20px 'Microsoft YaHei';
  color: #fff;
  text-align: center;
  margin-bottom: 10px;
}
.introduce {
  font: normal 700 12px 'Microsoft YaHei';
  color: #fff;
  text-align: center;
}

• 使用了 font 简写属性设置字体样式
• 白色文字 (#fff) 在黑色背景上形成高对比度
• 名称使用 20px 较大字号，简介使用 12px 较小字号
• 都设置为居中对齐

设计要点总结

1. 视觉层次：通过字体大小差异创建清晰的视觉层次
2. 对比度：黑白高对比度确保可读性
3. 圆角设计：卡片和头像都使用圆角，营造友好现代感
4. 间距控制：精心调整的内外边距使布局平衡
5. 居中布局：所有内容居中对齐，形成视觉焦点

响应式考虑

当前设计是固定尺寸的，要使其响应式，可以：

@media(max-width: 600px) {
  .card {
    width: 200px;
    height: 200px;
  }
  .logo {
    width: 70px;
    height: 70px;
  }
}

扩展建议

1. 添加悬停效果增强交互性：

.card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
  transition: all 0.3s ease;
}

2. 使用 CSS 变量方便主题切换：

:root {
  --card-bg: #000;
  --text-color: #fff;
}

这种简洁的卡片设计虽然简单，但包含了 CSS 布局的核心概念，非常适合初学者练习，也可以作为更复杂组件的基础。