每日CSS一练 ✨

1. 基础选择器样式

/* 通配选择器 - 为所有元素设置盒模型计算方式 */
* {
  box-sizing: border-box; /* 内边距和边框不增加元素实际宽度 */
}

/* 类选择器 - 为卡片元素添加优雅阴影 */
.card {
  box-shadow: 0 4px 8px rgba(0,0,0,0.1); /* 柔和的投影效果 */
  transition: transform 0.3s ease; /* 悬停时产生平滑的浮动效果 */
}

/* ID选择器 - 主导航栏的特殊样式 */
#main-nav {
  background: linear-gradient(90deg, #3498db, #2ecc71); /* 蓝绿渐变色背景 */
  position: sticky; /* 滚动时保持可见 */
  top: 0;
}

2. 伪类与动画

/* 链接悬停效果 - 如同蝴蝶振翅 */
a:hover {
  color: #e74c3c; /* 悬停时变为醒目的红色 */
  transform: translateY(-2px); /* 轻微上浮效果 */
}

/* 按钮点击涟漪效果 */
.btn:active {
  animation: ripple 0.6s linear; /* 点击时触发涟漪动画 */
}

/* 关键帧动画 - 创造心跳节奏 */
@keyframes heartbeat {
  0% { transform: scale(1); } /* 初始大小 */
  50% { transform: scale(1.1); } /* 放大10% */
  100% { transform: scale(1); } /* 恢复原状 */
}

3. 响应式布局技巧

/* 媒体查询 - 移动端适配 */
@media (max-width: 768px) {
  .container {
    flex-direction: column; /* 小屏幕改为垂直布局 */
    padding: 0 1rem; /* 增加左右内边距 */
  }
}

/* 弹性布局 - 打造自适应网格 */
.grid {
  display: flex;
  flex-wrap: wrap; /* 允许元素换行 */
  gap: 20px; /* 网格间隙统一为20px */
}

/* 网格布局 - 精准控制行列 */
.dashboard {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); /* 自动填充最小250px的列 */
}

4. 视觉增强效果

/* 文字描边 - 让标题脱颖而出 */
.title {
  -webkit-text-stroke: 1px #2c3e50; /* 给文字添加1px深色描边 */
  text-shadow: 3px 3px 0 rgba(0,0,0,0.1); /* 添加轻微投影 */
}

/* 毛玻璃效果 - 现代感背景 */
.blur-bg {
  backdrop-filter: blur(10px); /* 背景模糊10像素 */
  background-color: rgba(255,255,255,0.5); /* 半透明白色叠加 */
}

/* 自定义滚动条 - 提升用户体验 */
::-webkit-scrollbar {
  width: 8px; /* 滚动条宽度 */
  background: #f1f1f1; /* 轨道颜色 */
}

5. 实用工具类

/* 居中定位 - 万能用具 */
.center-xy {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* 精准居中定位 */
}

/* 文字截断 - 防止溢出 */
.truncate {
  white-space: nowrap; /* 禁止换行 */
  overflow: hidden; /* 隐藏溢出内容 */
  text-overflow: ellipsis; /* 显示省略号 */
}

/* 高亮提示 - 吸引用户注意 */
.highlight {
  background: linear-gradient(to right, transparent 50%, #fef9e7 50%); /* 黄色高光底色 */
  background-size: 200% 100%; /* 背景尺寸扩大 */
  transition: background-position 0.5s; /* 平滑过渡效果 */
}