CSS 每日一练

基础选择器

/* 通配选择器 - 为所有元素设置默认边距清零 */
* {
  margin: 0;
  padding: 0;
}

/* 元素选择器 - 为所有段落设置优雅的文字间距 */
p {
  line-height: 1.6;
  margin-bottom: 1em;
}

/* 类选择器 - 为高亮文本添加阳光般的黄色背景 */
.highlight {
  background-color: #fff9c4;
}

/* ID选择器 - 为主标题披上深邃的蓝色外衣 */
#main-title {
  color: #1a237e;
  font-size: 2.5rem;
}

盒模型精粹

/* 标准盒模型 - 内容宽度固定，边框和内边距向外扩展 */
.box-standard {
  box-sizing: content-box;
  width: 300px;
  padding: 20px;
  border: 2px solid #7e57c2;
}

/* 边框盒模型 - 边框和内边距向内收缩，总宽度保持不变 */
.box-border {
  box-sizing: border-box;
  width: 300px;
  padding: 20px;
  border: 2px solid #26a69a;
}

/* 弹性盒子 - 创建现代化的响应式布局容器 */
.flex-container {
  display: flex;
  justify-content: space-around;
  align-items: center;
  flex-wrap: wrap;
}

色彩与渐变

/* 纯色背景 - 为元素披上优雅的深紫色礼服 */
.solid-bg {
  background-color: #5e35b1;
}

/* 线性渐变 - 创造从日落到黄昏的天空过渡效果 */
.linear-gradient {
  background: linear-gradient(to right, #ff6b6b, #556270);
}

/* 径向渐变 - 模拟聚光灯照射的视觉效果 */
.radial-gradient {
  background: radial-gradient(circle, #f5f7fa, #c3cfe2);
}

/* 文字渐变色 - 为文字添加彩虹般的色彩过渡 */
.text-gradient {
  background: linear-gradient(to right, #ff9a9e, #fad0c4);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

动画艺术

/* 关键帧动画 - 创建元素呼吸般的脉动效果 */
@keyframes pulse {
  /* 初始状态 - 原始大小 */
  0% {
    transform: scale(1);
  }
  /* 中间状态 - 轻微放大 */
  50% {
    transform: scale(1.05);
  }
  /* 结束状态 - 恢复原状 */
  100% {
    transform: scale(1);
  }
}

/* 应用动画 - 让按钮拥有吸引注意力的脉动效果 */
.pulse-button {
  animation: pulse 2s infinite;
}

/* 过渡效果 - 创建平滑的悬停颜色变换 */
.transition-box {
  transition: all 0.3s ease-in-out;
  background-color: #e3f2fd;
}

/* 悬停状态 - 鼠标经过时如湖水般变为深蓝色 */
.transition-box:hover {
  background-color: #1565c0;
}