使用纯 CSS 创建简洁名片卡片的学习实践
本文将分享如何使用纯 HTML 和 CSS 创建一个简洁美观的名片式卡片，适合作为个人简介或产品展示。
源码展示
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>纯 CSS 名片卡片</title>
<style>
/* 全局重置与基础设置 */
* { margin: 0; padding: 0; box-sizing: border-box; }
body { background-color: #daf1e2; display: flex; justify-content: center; align-items: center; min-height: 100vh; font-family: 'Microsoft YaHei', sans-serif; }
/* 卡片容器样式 */
.card { margin: 30px auto; width: 250px; height: 250px; background-color: #000; text-align: center; border-radius: 25px; padding-top: 35px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); transition: all 0.3s ease; }
/* 头像图片样式 */
.logo { margin-bottom: 20px; width: 90px; height: 90px; border-radius: 50%; object-fit: cover; border: 3px solid #daf1e2; }
/* 文字样式 */
.writer { font: normal 700 20px 'Microsoft YaHei', sans-serif; color: #fff; text-align: center; margin-bottom: 10px; }
.introduce { font: normal 700 12px 'Microsoft YaHei', sans-serif; color: #fff; text-align: center; }
/* 悬停效果 */
.card:hover { transform: translateY(-5px); box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3); }
/* 响应式设计 */
@media(max-width: 600px) {
.card { width: 200px; height: 200px; padding-top: 25px; }
.logo { width: 70px; height: 70px; margin-bottom: 15px; }
.writer { font-size: 18px; }
.introduce { font-size: 10px; }
}
OverThinker
欢迎来到我的博客
