每日CSS一练 ✨

/* 基础重置 - 为元素赋予纯净的画布 */
* {
  margin: 0;          /* 消除默认外边距 */
  padding: 0;         /* 消除默认内边距 */
  box-sizing: border-box; /* 让元素尺寸包含边框 */
}

/* 页面主容器 - 内容的优雅舞台 */
.container {
  width: 90%;         /* 适度宽度留白 */
  max-width: 1200px;  /* 大屏上的优雅限制 */
  margin: 0 auto;     /* 水平居中魔法 */
  padding: 2rem;      /* 舒适的呼吸空间 */
}

/* 标题样式 - 文字的王者风范 */
.title {
  font-size: 2.5rem;  /* 威严的字体尺寸 */
  color: #2c3e50;     /* 深邃的色调 */
  text-align: center; /* 居中的仪式感 */
  margin-bottom: 1.5rem; /* 与下文保持优雅距离 */
  text-shadow: 1px 1px 3px rgba(0,0,0,0.1); /* 微妙的立体感 */
}

/* 按钮样式 - 交互的点睛之笔 */
.btn {
  display: inline-block; /* 行内块的灵活特性 */
  padding: 0.8rem 1.5rem; /* 舒适的点击区域 */
  background: #3498db;   /* 清新的蓝色背景 */
  color: white;         /* 纯净的文字颜色 */
  border-radius: 4px;   /* 柔和的边角 */
  text-decoration: none; /* 去除下划线 */
  transition: all 0.3s ease; /* 丝滑的过渡效果 */
}

/* 按钮悬停效果 - 互动的视觉反馈 */
.btn:hover {
  background: #2980b9;  /* 颜色加深 */
  transform: translateY(-2px); /* 轻盈的上浮效果 */
  box-shadow: 0 4px 8px rgba(0,0,0,0.1); /* 微妙的投影 */
}

/* 卡片设计 - 内容的精致画框 */
.card {
  background: white;    /* 纯净的背景 */
  border-radius: 8px;   /* 圆润的边角 */
  box-shadow: 0 2px 10px rgba(0,0,0,0.1); /* 优雅的投影 */
  overflow: hidden;     /* 内容溢出处理 */
  transition: transform 0.3s ease; /* 变换动画 */
}

/* 卡片悬停效果 - 吸引用户互动 */
.card:hover {
  transform: translateY(-5px); /* 明显的上浮 */
  box-shadow: 0 8px 20px rgba(0,0,0,0.15); /* 更强的立体感 */
}

/* 响应式设计 - 适应不同舞台的舞者 */
@media (max-width: 768px) {
  .container {
    width: 95%;       /* 小屏幕上更多空间利用 */
    padding: 1rem;    /* 紧凑的内边距 */
  }

  .title {
    font-size: 2rem;  /* 适度的尺寸缩小 */
  }
}