跳到主要内容

CSS3 基础

CSS3 提供了更多现代样式能力，让页面可以实现响应式布局、动画、渐变、阴影和更丰富的视觉效果。

学习重点​

  • 选择器增强；
  • flex 布局；
  • grid 布局；
  • transition；
  • animation；
  • transform；
  • 渐变；
  • 阴影；
  • 媒体查询；
  • 自定义变量。

示例​

.card {
  display: flex;
  gap: 16px;
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  transition: transform 0.2s ease;
}

.card:hover {
  transform: translateY(-4px);
}

学习建议​

先掌握布局，再学习动画和视觉效果。实际项目中优先保证可读性、响应式和兼容性。