纯 CSS 静态名片卡片设计与实现

注意： 记得替换为自己的图片路径。

HTML 结构分析

基础 HTML 结构如下：

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

结构包含一个 div 容器作为卡片主体，一个圆形头像图片，以及两个段落文本分别显示名称和简短介绍。

CSS 样式详解

1. 全局重置与基础设置

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

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

2. 卡片容器样式

div.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. 头像图片样式

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

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

4. 文字样式

p.writer { font: normal 700 20px 微软雅黑; color: #fff; text-align: center; margin-bottom: 10px; }
p.introduce { font: normal 700 12px 微软雅黑; color: #fff; text-align: center; }

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

设计要点总结

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

响应式考虑

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

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

扩展建议

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

div.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 布局的核心概念，非常适合初学者练习，也可以作为更复杂组件的基础。