每日CSS一练 🌈

1. 基础选择器与文字样式 ✒️

/* 为所有段落文本设置基础样式 */
p {
  color: #333;            /* 深灰色文字，提升可读性 */
  font-size: 16px;        /* 黄金阅读字号 */
  line-height: 1.6;       /* 1.6倍行距，呼吸感排版 */
  text-shadow: 0 1px 1px rgba(0,0,0,0.1); /* 微阴影提升层次感 */
}

2. 盒子模型的艺术 🎁

.card {
  width: 300px;          /* 卡片最佳展示宽度 */
  padding: 20px;         /* 内呼吸空间 */
  margin: 15px auto;     /* 水平居中 + 外间距 */
  border-radius: 8px;    /* 圆角温柔过渡 */
  box-shadow: 0 3px 10px rgba(0,0,0,0.1); /* 立体投影效果 */
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%); /* 优雅渐变色 */
}

3. 动画与交互魔法 ✨

.btn {
  transition: all 0.3s ease-in-out; /* 丝滑过渡效果 */
  transform: scale(1);   /* 默认状态 */
}

.btn:hover {
  transform: scale(1.05); /* 悬浮轻微放大 */
  box-shadow: 0 5px 15px rgba(0,0,0,0.2); /* 悬浮投影增强 */
  cursor: pointer;       /* 手势光标提示可点击 */
}

4. 现代布局技巧 🧩

.grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); /* 智能响应式网格 */
  gap: 20px;            /* 网格间隙 */
  place-items: center;  /* 内容居中对齐 */
}

/* 伪元素装饰效果 */
.grid-item::before {
  content: "";          /* 必须属性 */
  position: absolute;
  inset: 0;             /* 全尺寸覆盖 */
  background: rgba(255,255,255,0.1); /* 半透明白色叠加层 */
}

5. 响应式设计要点 📱

@media (max-width: 768px) {
  /* 移动端专属样式 */
  .header {
    flex-direction: column; /* 纵向堆叠元素 */
    padding: 10px;         /* 缩小内边距 */
  }

  /* 字号适应性调整 */
  body {
    font-size: 14px;      /* 移动端更适合小字号 */
  }
}