CSS3 高阶使用技巧实战

资深前端工程师私藏，让你的 CSS 技能从入门到精通

目录

  1. Flexbox 高级布局
  2. Grid 布局高阶应用
  3. CSS 变量深度应用
  4. 动画与过渡进阶
  5. 3D 变换与空间效果
  6. 滤镜与混合模式
  7. 滚动驱动动画
  8. CSS 伪类高级应用
  9. 现代 CSS 选择器
  10. 视觉特效与创意设计
  11. 响应式设计进阶
  12. 容器查询
  13. CSS 性能优化
  14. 无障碍设计
  15. CSS 黑科技与奇技淫巧
  16. 自定义属性动画
  17. 层叠与优先级
  18. 组件化设计模式
  19. 动画库与实战
  20. CSS 调试技巧
  21. 未来 CSS 特性预览
  22. 实战案例集锦
  23. 最佳实践总结

一、Flexbox 高级布局

1.1 自动 margins 的妙用

/* 1. 分离flex子项到两侧 */
.nav {
  display: flex;
}

.nav-brand {
  margin-right: auto; /* 自动占据所有剩余空间 */
}

.nav-link + .nav-link {
  margin-left: 20px;
}

/* 2. 垂直居中内容 */
.flex-center {
  display: flex;
}

.flex-center > * {
  margin: auto; /* 所有方向自动margin */
}

/* 3. 分离效果 */
.toolbar {
  display: flex;
  gap: 10px;
}

.toolbar-left {
  margin-right: auto;
}

.toolbar-center {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

.toolbar-right {
  margin-left: auto;
}

/* 4. 底部对齐 */
.card-footer {
  display: flex;
  gap: 10px;
}

.card-footer button:first-child {
  margin-right: auto; /* 第一个按钮靠左 */
}

1.2 Flex 嵌套与复杂布局

/* 嵌套flex实现复杂表单 */
.form-row {
  display: flex;
  gap: 20px;
  margin-bottom: 16px;
}

.form-row > .input-group {
  display: flex;
  flex: 1;
}

.form-row > .input-group > input {
  flex: 1;
  min-width: 0; /* 防止溢出 */
}

.form-row > .input-group > button {
  flex: 0 0 auto;
}

/* 复杂仪表盘布局 */
.dashboard {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

.dashboard-header {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.dashboard-body {
  flex: 1;
  display: flex;
  overflow: hidden;
}

.dashboard-sidebar {
  flex: 0 0 280px;
  overflow-y: auto;
}

.dashboard-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}

.dashboard-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 20px;
  padding: 20px;
}

1.3 Flex 技巧与陷阱

/* 1. flex-basis vs width */
/* flex-basis 优先级高于 width */
.item {
  width: 200px;
  flex-basis: 100px; /* 最终宽度为 100px */
}

/* 2. flex: 1 的精确含义 */
.item {
  flex: 1; /* = flex: 1 1 0% */
  /* flex-grow: 1  - 放大比例
     flex-shrink: 1 - 缩小比例
     flex-basis: 0% - 基础尺寸 */
}

/* 3. 内容溢出的处理 */
.flex-overflow {
  display: flex;
  min-width: 0; /* 关键！允许收缩 */
}

.flex-overflow > * {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 4. 防止 flex 子项被压缩 */
.no-shrink {
  flex-shrink: 0;
}

/* 5. flex-direction 陷阱 */
.column-flex {
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow: hidden;
}

.column-flex > header {
  flex: 0 0 auto; /* 不要写 flex: 0 0 100% */
}

.column-flex > main {
  flex: 1; /* 自动占据剩余高度 */
  overflow-y: auto;
}

.column-flex > footer {
  flex: 0 0 auto;
}

1.4 Flex 实现常用布局

/* 1. 输入框组合 */
.input-group {
  display: flex;
}

.input-group input {
  border-radius: 4px 0 0 4px;
}

.input-group button {
  border-radius: 0 4px 4px 0;
}

/* 2. 媒体对象 */
.media {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}

.media-figure {
  flex: 0 0 80px;
}

.media-body {
  flex: 1;
  min-width: 0;
}

.media-body > *:last-child {
  margin-bottom: 0;
}

/* 3. 列表内联 */
.inline-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
}

/* 4. 底部固定按钮 */
.fixed-button-layout {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.fixed-button-layout > main {
  flex: 1;
}

.fixed-button-layout > footer {
  flex: 0 0 auto;
  padding: 16px;
  background: white;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
}

二、Grid 布局高阶应用

2.1 Grid 命名与区域

/* 1. 命名网格线 */
.grid-named-lines {
  display: grid;
  grid-template-columns:
    [full-start] 1fr
    [content-start] minmax(0, 65ch)
    [content-end] 1fr
    [full-end];
}

.full-width {
  grid-column: full-start / full-end;
}

.content-width {
  grid-column: content-start / content-end;
}

/* 2. 命名区域布局 */
.page-layout {
  display: grid;
  grid-template-areas:
    "header header header"
    "sidebar main aside"
    "footer footer footer";
  grid-template-columns: 250px 1fr 200px;
  grid-template-rows: auto 1fr auto;
  min-height: 100vh;
}

.page-header {
  grid-area: header;
}
.page-sidebar {
  grid-area: sidebar;
}
.page-main {
  grid-area: main;
}
.page-aside {
  grid-area: aside;
}
.page-footer {
  grid-area: footer;
}

/* 3. 响应式区域 */
.responsive-grid {
  display: grid;
  grid-template-areas:
    "header"
    "main"
    "sidebar"
    "footer";
  grid-template-columns: 1fr;
}

@media (min-width: 768px) {
  .responsive-grid {
    grid-template-areas:
      "header header"
      "sidebar main"
      "footer footer";
    grid-template-columns: 200px 1fr;
  }
}

@media (min-width: 1200px) {
  .responsive-grid {
    grid-template-areas:
      "header header header"
      "sidebar main aside"
      "footer footer footer";
    grid-template-columns: 200px 1fr 200px;
  }
}

2.2 Grid 高级定位

/* 1. 自动填充 vs 自动适应 */
.auto-fill {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  /* 会填满整行，可能产生空白 */
}

.auto-fit {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  /* 自动收缩，空出空间 */
}

/* 2. minmax 技巧 */
.tricks {
  grid-template-columns:
    minmax(100px, 1fr) /* 至少100px，最多1份 */
    minmax(200px, 2fr) /* 至少200px，最多2份 */
    minmax(150px, 1fr); /* 至少150px，最多1份 */
}

/* 3. fr 单位的陷阱 */
.trap {
  grid-template-columns: 1fr 1fr;
  /* 问题：1fr = (容器宽度 - 固定宽度) / 份数 */
  /* 如果有 padding，内容区域可能不符合预期 */
}

.solution {
  display: grid;
  grid-template-columns: 1fr 1fr;
  /* 使用 border-box 或 gap 来控制间距 */
  gap: 20px;
}

/* 4. 网格对齐 */
.align-grid {
  display: grid;
  justify-content: start; /* 水平对齐 */
  align-content: start; /* 垂直对齐 */
  justify-items: stretch; /* 单元格水平对齐 */
  align-items: stretch; /* 单元格垂直对齐 */
}

2.3 Subgrid（子网格）

/* 1. 基础子网格 */
.card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: auto;
  gap: 20px;
}

.card {
  display: grid;
  grid-template-rows: subgrid; /* 继承父网格行 */
  grid-row: span 3; /* 跨越3行 */
}

/* 2. 对齐的表单网格 */
.form-grid {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 10px 20px;
}

.form-grid-field {
  display: grid;
  grid-template-columns: subgrid;
  grid-column: 1 / -1; /* 跨越整行 */
}

/* 3. 复杂表格布局 */
.table-grid {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  grid-auto-flow: dense; /* 紧密填充 */
}

.table-cell {
  padding: 12px 16px;
  border-bottom: 1px solid #eee;
  display: grid;
  align-items: center;
}

2.4 Grid 实战：高级布局

/* 1. 杂志式布局 */
.magazine {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 20px;
}

.featured {
  grid-column: span 8;
  grid-row: span 2;
}
.sidebar-1 {
  grid-column: span 4;
}
.sidebar-2 {
  grid-column: span 4;
}
.small-1 {
  grid-column: span 4;
}
.small-2 {
  grid-column: span 4;
}
.small-3 {
  grid-column: span 4;
}

@media (max-width: 768px) {
  .featured,
  .sidebar-1,
  .sidebar-2,
  .small-1,
  .small-2,
  .small-3 {
    grid-column: span 12;
    grid-row: span 1;
  }
}

/* 2. 甘特图 */
.gantt {
  display: grid;
  grid-template-columns: 150px repeat(24, 1fr);
  grid-auto-rows: 50px;
}

.gantt-label {
  grid-column: 1;
}
.gantt-bar {
  grid-column: 3 / 8; /* 第3天到第8天 */
  grid-row: 2;
  background: linear-gradient(90deg, #4caf50 0%, #8bc34a 100%);
  border-radius: 4px;
}

/* 3. 日历布局 */
.calendar {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  grid-auto-rows: minmax(100px, auto);
}

.calendar-header {
  grid-column: 1 / -1;
}
.calendar-day {
  border: 1px solid #eee;
}

/* 4. 断点系统 */
.grid-system {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 20px;
}

.col-1 {
  grid-column: span 1;
}
.col-2 {
  grid-column: span 2;
}
.col-3 {
  grid-column: span 3;
}
.col-4 {
  grid-column: span 4;
}
.col-5 {
  grid-column: span 5;
}
.col-6 {
  grid-column: span 6;
}
.col-7 {
  grid-column: span 7;
}
.col-8 {
  grid-column: span 8;
}
.col-9 {
  grid-column: span 9;
}
.col-10 {
  grid-column: span 10;
}
.col-11 {
  grid-column: span 11;
}
.col-12 {
  grid-column: span 12;
}

/* 响应式 */
@media (max-width: 768px) {
  .col-1,
  .col-2,
  .col-3,
  .col-4,
  .col-5,
  .col-6,
  .col-7,
  .col-8,
  .col-9,
  .col-10,
  .col-11,
  .col-12 {
    grid-column: span 12;
  }
}

2.5 Grid 与 Flex 混合布局

/* 1. Grid 容器 + Flex 子项 */
.hybrid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}

.hybrid .card {
  display: flex;
  flex-direction: column;
}

.hybrid .card-content {
  flex: 1;
}

.hybrid .card-footer {
  margin-top: auto;
}

/* 2. Masonry 布局近似 */
.masonry {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 5px; /* 很小的单位 */
}

.masonry-item:nth-child(1) {
  grid-row-end: span 31;
}
.masonry-item:nth-child(2) {
  grid-row-end: span 40;
}
.masonry-item:nth-child(3) {
  grid-row-end: span 25;
}
.masonry-item:nth-child(4) {
  grid-row-end: span 35;
}

/* 3. 动态 Grid */
.dynamic-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--card-min, 250px), 1fr));
  gap: var(--grid-gap, 20px);
}

三、CSS 变量深度应用

3.1 变量的类型与验证

/* 1. 带类型的变量 */
@property --gradient-angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}

@property --progress {
  syntax: "<percentage>";
  initial-value: 0%;
  inherits: false;
}

@property --color-r {
  syntax: "<integer>";
  initial-value: 0;
  inherits: false;
}

/* 2. 使用类型化变量 */
.animatable-gradient {
  background: conic-gradient(
    from var(--gradient-angle),
    #ff6b6b,
    #feca57,
    #48dbfb,
    #ff9ff3,
    #ff6b6b
  );
  animation: rotate 3s linear infinite;
}

/* 3. 颜色分量 */
.color-component {
  --red: 255;
  --green: 100;
  --blue: 50;
  color: rgb(var(--red), var(--green), var(--blue));
}

3.2 变量与计算

/* 1. 基础计算 */
.calculated {
  --base: 16;
  --scale: 1.5;

  font-size: calc(var(--base) * 1px);
  padding: calc(var(--base) * var(--scale) * 1px);
}

/* 2. 颜色变换 */
.color-shifts {
  --hue: 220;
  --lightness: 50%;

  --primary: hsl(var(--hue), 70%, var(--lightness));
  --primary-light: hsl(var(--hue), 70%, calc(var(--lightness) + 10%));
  --primary-dark: hsl(var(--hue), 70%, calc(var(--lightness) - 10%));
}

/* 3. 响应式变量 */
:root {
  --fluid-min-width: 320;
  --fluid-max-width: 1200;
  --fluid-min-size: 16;
  --fluid-max-size: 20;
}

@function fluid-size() {
  @return calc(
    (var(--fluid-min-size) * 1px) +
    (var(--fluid-max-size) - var(--fluid-min-size)) *
    ((100vw - (var(--fluid-min-width) * 1px)) /
    (var(--fluid-max-width) - var(--fluid-min-width)))
  );
}

.fluid-text {
  font-size: fluid-size();
  clamp(
    calc(var(--fluid-min-size) * 1px),
    fluid-size(),
    calc(var(--fluid-max-size) * 1px)
  );
}

/* 4. 复杂计算 */
.complex {
  --columns: 3;
  --gap: 20px;
  --container: 1200px;

  width: calc(var(--container) * 1px);
  column-count: var(--columns);
  column-gap: calc(var(--gap) * 1px);
}

3.3 主题系统深度应用

/* 1. 多层级主题 */
:root {
  /* 全局 */
  --color-primary: #3b82f6;
  --spacing: 16px;
}

.theme-dark {
  /* 覆盖 */
  --color-primary: #60a5fa;
  --spacing: 20px;
}

.component {
  /* 组件级别 */
  --btn-bg: var(--color-primary);
  --btn-radius: 8px;
}

/* 2. CSS 范围主题 */
.card {
  --card-bg: white;
  --card-text: black;

  background: var(--card-bg);
  color: var(--card-text);
}

.card.inverted {
  --card-bg: black;
  --card-text: white;
}

/* 3. 动态主题切换 */
[data-theme="cyberpunk"] {
  --primary: #ff00ff;
  --secondary: #00ffff;
  --accent: #ffff00;
  --gradient: linear-gradient(135deg, var(--primary), var(--secondary));
}

[data-theme="forest"] {
  --primary: #2d5a27;
  --secondary: #8fbc8f;
  --accent: #ffd700;
  --gradient: linear-gradient(135deg, var(--primary), var(--secondary));
}

/* 4. 主题渐变过渡 */
.theme-transition {
  transition:
    background-color 0.3s ease,
    color 0.3s ease,
    border-color 0.3s ease;
}

3.4 变量的实战应用

/* 1. 组件变体 */
.button {
  --btn-bg: var(--color-primary);
  --btn-color: white;
  --btn-padding: 12px 24px;
  --btn-radius: 8px;
  --btn-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);

  background: var(--btn-bg);
  color: var(--btn-color);
  padding: var(--btn-padding);
  border-radius: var(--btn-radius);
  box-shadow: var(--btn-shadow);
}

.button--secondary {
  --btn-bg: transparent;
  --btn-color: var(--color-primary);
  --btn-shadow: none;
  border: 2px solid currentColor;
}

.button--danger {
  --btn-bg: var(--color-danger);
}

.button--large {
  --btn-padding: 16px 32px;
  --btn-radius: 12px;
}

/* 2. 间距系统 */
.spacing-system {
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
}

.section {
  padding: var(--space-7) 0;
}

.section--compact {
  padding: var(--space-4) 0;
}

/* 3. 阴影系统 */
.shadow-system {
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
  --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

/* 4. 动画配置 */
.animation-config {
  --duration-fast: 150ms;
  --duration-normal: 300ms;
  --duration-slow: 500ms;
  --ease-default: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

四、动画与过渡进阶

4.1 缓动函数高级应用

/* 1. 常用缓动曲线 */
.easing {
  /* 标准曲线 */
  --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);

  /* 弹性曲线 */
  --ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
  --ease-elastic: cubic-bezier(0.68, -0.6, 0.32, 1.6);

  /* 特殊曲线 */
  --ease-snappy: cubic-bezier(0.2, 0, 0, 1);
  --ease-glide: cubic-bezier(0.43, 0.13, 0.23, 0.96);
}

/* 2. 自定义缓动函数 */
.custom-ease {
  /* 缓入加速 */
  transition-timing-function: cubic-bezier(0.7, 0, 0.84, 0);

  /* 缓出减速 */
  transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1);

  /* 加速后减速 */
  transition-timing-function: cubic-bezier(0.37, 0, 0.63, 1);
}

/* 3. 弹性悬停效果 */
.bounce-hover {
  transition: transform 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.bounce-hover:hover {
  transform: scale(1.1);
}

/* 4. 弹性点击效果 */
.elastic-click:active {
  transform: scale(0.95);
  transition: transform 0.1s;
}

4.2 交错动画

/* 1. Stagger 效果基础 */
.stagger-container > * {
  opacity: 0;
  transform: translateY(20px);
  animation: stagger-in 0.5s ease forwards;
}

.stagger-container > *:nth-child(1) {
  animation-delay: 0.1s;
}
.stagger-container > *:nth-child(2) {
  animation-delay: 0.2s;
}
.stagger-container > *:nth-child(3) {
  animation-delay: 0.3s;
}
.stagger-container > *:nth-child(4) {
  animation-delay: 0.4s;
}
.stagger-container > *:nth-child(5) {
  animation-delay: 0.5s;
}

@keyframes stagger-in {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 2. 使用 CSS 变量实现动态 stagger */
.stagger-var {
  --stagger-delay: 0ms;
  animation: fade-in 0.5s ease var(--stagger-delay) forwards;
}

/* JavaScript 设置 */
.item:nth-child(1) {
  --stagger-delay: 100ms;
}
.item:nth-child(2) {
  --stagger-delay: 200ms;
}

/* 3. 波浪效果 */
.wave-container {
  display: flex;
}

.wave {
  animation: wave 1s ease-in-out infinite;
}

.wave:nth-child(1) {
  animation-delay: 0s;
}
.wave:nth-child(2) {
  animation-delay: 0.1s;
}
.wave:nth-child(3) {
  animation-delay: 0.2s;
}
.wave:nth-child(4) {
  animation-delay: 0.3s;
}
.wave:nth-child(5) {
  animation-delay: 0.4s;
}

@keyframes wave {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}

/* 4. 瀑布流效果 */
.waterfall {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  gap: 10px;
  max-height: 500px;
}

.waterfall > * {
  animation: fall 0.5s ease forwards;
  opacity: 0;
}

@keyframes fall {
  from {
    opacity: 0;
    transform: translateY(-50px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

4.3 复杂动画序列

/* 1. 加载动画 */
.loader {
  position: relative;
  width: 50px;
  height: 50px;
}

.loader::before,
.loader::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  animation: pulse-ring 1.5s ease-out infinite;
}

.loader::after {
  animation-delay: 0.5s;
}

@keyframes pulse-ring {
  0% {
    width: 0;
    height: 0;
    opacity: 1;
  }
  100% {
    width: 50px;
    height: 50px;
    opacity: 0;
  }
}

/* 2. 进度条动画 */
.progress {
  position: relative;
  height: 8px;
  background: #e0e0e0;
  border-radius: 4px;
  overflow: hidden;
}

.progress-bar {
  height: 100%;
  background: linear-gradient(90deg, #4caf50 0%, #8bc34a 50%, #4caf50 100%);
  background-size: 200% 100%;
  animation: progress-stripe 1s linear infinite;
}

@keyframes progress-stripe {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: 0 0;
  }
}

/* 3. 骨架屏动画 */
.skeleton {
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.5s ease-in-out infinite;
}

@keyframes skeleton-shimmer {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}

/* 4. 翻转卡片 */
.flip-card {
  perspective: 1000px;
}

.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 0.6s;
  transform-style: preserve-3d;
}

.flip-card:hover .flip-card-inner {
  transform: rotateY(180deg);
}

.flip-card-front,
.flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.flip-card-back {
  transform: rotateY(180deg);
}

4.4 交互动画

/* 1. 展开/收起 */
.expand-collapse {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease-out;
}

.expand-collapse.active {
  max-height: 500px; /* 足够大的值 */
}

/* 使用 grid 实现平滑展开 */
.grid-expand {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.3s ease-out;
}

.grid-expand > .content {
  overflow: hidden;
}

.grid-expand.active {
  grid-template-rows: 1fr;
}

/* 2. Tab 切换 */
.tab-content {
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: all 0.3s ease;
}

.tab-content.active {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* 3. Modal 动画 */
.modal-overlay {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease;
}

.modal-overlay.active {
  opacity: 1;
  visibility: visible;
}

.modal-content {
  transform: scale(0.9) translateY(20px);
  opacity: 0;
  transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.modal-overlay.active .modal-content {
  transform: scale(1) translateY(0);
  opacity: 1;
}

/* 4. 拖拽排序占位符 */
.sortable-item {
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;
}

.sortable-item.dragging {
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
  z-index: 1000;
}

.sortable-item.placeholder {
  background: #f0f0f0;
  border: 2px dashed #ccc;
}

五、3D 变换与空间效果

5.1 3D 变换基础

/* 1. 3D 空间设置 */
.scene {
  perspective: 1000px; /* 透视距离 */
  perspective-origin: center center; /* 透视原点 */
}

.cube {
  position: relative;
  width: 100px;
  height: 100px;
  transform-style: preserve-3d; /* 保持3D空间 */
}

.face {
  position: absolute;
  width: 100px;
  height: 100px;
  backface-visibility: visible; /* 背面可见 */
}

.face-front {
  transform: translateZ(50px);
}
.face-back {
  transform: rotateY(180deg) translateZ(50px);
}
.face-left {
  transform: rotateY(-90deg) translateZ(50px);
}
.face-right {
  transform: rotateY(90deg) translateZ(50px);
}
.face-top {
  transform: rotateX(90deg) translateZ(50px);
}
.face-bottom {
  transform: rotateX(-90deg) translateZ(50px);
}

5.2 3D 卡片效果

/* 1. 3D 倾斜卡片 */
.tilt-card {
  transform-style: preserve-3d;
  transition: transform 0.5s ease;
}

.tilt-card:hover {
  transform: rotateX(5deg) rotateY(5deg);
}

.tilt-card .card-content {
  transform: translateZ(30px);
}

.tilt-card .card-shine {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.2) 0%,
    transparent 50%
  );
  transform: translateZ(1px);
}

/* 2. 3D 翻书效果 */
.book {
  perspective: 2000px;
}

.book-page {
  transform-style: preserve-3d;
  transform-origin: left center;
  transition: transform 1s ease;
}

.book:hover .book-page:nth-child(2) {
  transform: rotateY(-180deg);
}

.book-page:nth-child(1) {
  z-index: 4;
}
.book-page:nth-child(2) {
  z-index: 3;
}
.book-page:nth-child(3) {
  z-index: 2;
}
.book-page:nth-child(4) {
  z-index: 1;
}

/* 3. 3D 相册 */
.carousel-3d {
  perspective: 1000px;
}

.carousel-3d-item {
  position: absolute;
  left: 50%;
  transform-style: preserve-3d;
  transition: transform 1s ease;
}

.carousel-3d-item:nth-child(1) {
  transform: translateX(-50%) rotateY(0deg) translateZ(300px);
}
.carousel-3d-item:nth-child(2) {
  transform: translateX(-50%) rotateY(60deg) translateZ(300px);
}
.carousel-3d-item:nth-child(3) {
  transform: translateX(-50%) rotateY(120deg) translateZ(300px);
}
.carousel-3d-item:nth-child(4) {
  transform: translateX(-50%) rotateY(180deg) translateZ(300px);
}
.carousel-3d-item:nth-child(5) {
  transform: translateX(-50%) rotateY(240deg) translateZ(300px);
}
.carousel-3d-item:nth-child(6) {
  transform: translateX(-50%) rotateY(300deg) translateZ(300px);
}

5.3 3D 视差效果

/* 1. 简单视差 */
.parallax-container {
  perspective: 1px;
  overflow-y: auto;
  overflow-x: hidden;
}

.parallax-layer {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

.parallax-back {
  transform: translateZ(-1px) scale(2);
}

.parallax-fore {
  transform: translateZ(0);
}

/* 2. 鼠标跟随 3D 效果 */
.mouse-3d {
  transform-style: preserve-3d;
  transition: transform 0.1s ease;
}

.mouse-3d-layer {
  transform: translateZ(var(--z, 0));
  transition: transform 0.1s ease;
}

/* JavaScript 设置变量 */
.mouse-3d:hover {
  transform: perspective(1000px) rotateX(var(--rotateX, 0deg))
    rotateY(var(--rotateY, 0deg));
}

/* 3. 3D 悬浮效果 */
.floating-3d {
  animation: float 3s ease-in-out infinite;
  transform-style: preserve-3d;
}

.floating-3d .shadow {
  transform: translateZ(-50px);
  filter: blur(20px);
  opacity: 0.3;
}

@keyframes float {
  0%,
  100% {
    transform: translateY(0) rotateZ(-2deg);
  }
  50% {
    transform: translateY(-20px) rotateZ(2deg);
  }
}

/* 4. 3D 折叠面板 */
.fold-panel {
  perspective: 1000px;
}

.fold-content {
  transform-origin: top center;
  transition: transform 0.6s ease;
}

.fold-panel.expanded .fold-content {
  transform: rotateX(-90deg);
}

.fold-content-inner {
  transform: rotateX(90deg);
  transform-origin: top center;
}

5.4 3D 高级应用

/* 1. 3D 幻灯片 */
.slideshow-3d {
  perspective: 1200px;
}

.slide {
  transform-style: preserve-3d;
  position: absolute;
  width: 100%;
  height: 100%;
}

.slide:nth-child(1) {
  transform: translateZ(-600px) rotateY(0deg);
}

.slide:nth-child(2) {
  transform: translateZ(-600px) rotateY(90deg);
}

.slide:nth-child(3) {
  transform: translateZ(-600px) rotateY(180deg);
}

/* 2. 3D 旋转木马 */
.carousel {
  position: relative;
  width: 300px;
  height: 200px;
  perspective: 1000px;
}

.carousel-item {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 200px;
  height: 150px;
  margin-left: -100px;
  margin-top: -75px;
  transform-style: preserve-3d;
  transition: transform 1s ease;
}

/* 3. 3D 房间效果 */
.room {
  perspective: 1000px;
  transform-style: preserve-3d;
}

.room-wall {
  position: absolute;
  width: 400px;
  height: 300px;
}

.room-floor {
  transform: rotateX(90deg) translateZ(-150px);
}

.room-left {
  transform: translateX(-200px) rotateY(-90deg);
}

.room-right {
  transform: translateX(200px) rotateY(90deg);
}

.room-back {
  transform: translateZ(-150px);
}

六、滤镜与混合模式

6.1 高级滤镜

/* 1. 组合滤镜 */
.filter-combo {
  filter: blur(1px) brightness(1.1) contrast(1.2)
    drop-shadow(0 5px 15px rgba(0, 0, 0, 0.3));
}

/* 2. 棕褐色调滤镜 */
.sepia {
  filter: sepia(50%);
}

/* 3. 图片处理效果 */
.image-effects {
  /* 复古 */
  filter: sepia(30%) contrast(1.2) brightness(1.1);

  /* 黑白 */
  filter: grayscale(100%);

  /* 冷色调 */
  filter: saturate(1.3) hue-rotate(180deg) brightness(1.1);

  /* 暖色调 */
  filter: saturate(1.2) brightness(1.1) sepia(20%);

  /* 电影感 */
  filter: contrast(1.3) saturate(1.2) brightness(0.9) hue-rotate(-10deg);
}

/* 4. 模糊背景 */
.blur-background {
  filter: blur(10px);
}

.blur-background:hover {
  filter: blur(0);
}

/* 5. SVG 滤镜 */
.custom-filter {
  filter: url("#custom-svg-filter");
}

6.2 混合模式

/* 1. 常见混合模式 */
.modes {
  mix-blend-mode: normal;
  mix-blend-mode: multiply; /* 正片叠底 */
  mix-blend-mode: screen; /* 滤色 */
  mix-blend-mode: overlay; /* 叠加 */
  mix-blend-mode: darken; /* 变暗 */
  mix-blend-mode: lighten; /* 变亮 */
  mix-blend-mode: color-dodge; /* 颜色减淡 */
  mix-blend-mode: color-burn; /* 颜色加深 */
  mix-blend-mode: difference; /* 差值 */
  mix-blend-mode: exclusion; /* 排除 */
}

/* 2. 文字遮罩效果 */
.text-mask {
  position: relative;
}

.text-mask::before {
  content: attr(data-text);
  position: absolute;
  background: url("image.jpg") center/cover;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* 3. 图片叠加 */
.image-blend {
  position: relative;
}

.image-blend::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, #667eea, #764ba2);
  mix-blend-mode: overlay;
  opacity: 0.5;
}

/* 4. 混合模式画廊 */
.gallery-item {
  position: relative;
}

.gallery-item::after {
  content: "";
  position: absolute;
  inset: 0;
  background: #3b82f6;
  mix-blend-mode: multiply;
  opacity: 0;
  transition: opacity 0.3s;
}

.gallery-item:hover::after {
  opacity: 0.7;
}

/* 5. 抠图效果 */
.cutout {
  background-image: url("green-bg.jpg");
  background-color: #00ff00;
  background-blend-mode: multiply;
}

6.3 高级视觉特效

/* 1. 毛玻璃效果 */
.glass {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.glass-dark {
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-back-filter: blur(20px) saturate(180%);
}

/* 2. 渐变边框 */
.gradient-border {
  position: relative;
  background: #1a1a1a;
}

.gradient-border::before {
  content: "";
  position: absolute;
  inset: -2px;
  background: linear-gradient(
    45deg,
    #ff6b6b,
    #feca57,
    #48dbfb,
    #ff9ff3,
    #ff6b6b
  );
  background-size: 400% 400%;
  border-radius: inherit;
  z-index: -1;
  animation: gradient-border 5s ease infinite;
}

@keyframes gradient-border {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

/* 3. 霓虹发光 */
.neon-text {
  color: #fff;
  text-shadow:
    0 0 5px #fff,
    0 0 10px #fff,
    0 0 20px #ff00de,
    0 0 30px #ff00de,
    0 0 40px #ff00de;
}

.neon-box {
  border: 2px solid #ff00de;
  box-shadow:
    0 0 5px #ff00de,
    0 0 10px #ff00de,
    0 0 20px #ff00de,
    inset 0 0 5px #ff00de;
}

/* 4. 阴影深度效果 */
.depth-3d {
  box-shadow:
    1px 1px 0 1px rgba(0, 0, 0, 0.1),
    2px 2px 0 1px rgba(0, 0, 0, 0.1),
    3px 3px 0 1px rgba(0, 0, 0, 0.1),
    4px 4px 0 1px rgba(0, 0, 0, 0.1),
    5px 5px 0 1px rgba(0, 0, 0, 0.1),
    6px 6px 0 1px rgba(0, 0, 0, 0.1);
}

/* 5. 动态波纹 */
.ripple {
  position: relative;
  overflow: hidden;
}

.ripple::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: radial-gradient(
    circle,
    rgba(255, 255, 255, 0.3) 0%,
    transparent 70%
  );
  transform: scale(0);
  opacity: 0;
}

.ripple:active::after {
  animation: ripple-effect 0.6s ease-out;
}

@keyframes ripple-effect {
  0% {
    transform: scale(0);
    opacity: 1;
  }
  100% {
    transform: scale(2);
    opacity: 0;
  }
}

6.4 遮罩与裁剪

/* 1. CSS 裁剪路径 */
.clip-path {
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}

.clip-circle {
  clip-path: circle(50% at 50% 50%);
}

.clip-ellipse {
  clip-path: ellipse(50% 45% at 50% 50%);
}

.clip-inset {
  clip-path: inset(20% 10% 30% 15%);
}

/* 2. 遮罩 */
.mask {
  mask-image: url("mask.png");
  -webkit-mask-image: url("mask.png");
  mask-mode: alpha;
  mask-repeat: no-repeat;
  mask-size: 100% 100%;
}

.mask-gradient {
  mask-image: linear-gradient(to bottom, black 50%, transparent 100%);
}

/* 3. 复杂裁剪 */
.hexagon {
  clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
}

.bevel {
  clip-path: polygon(
    0% 15%,
    15% 15%,
    15% 0%,
    85% 0%,
    85% 15%,
    100% 15%,
    100% 85%,
    85% 85%,
    85% 100%,
    15% 100%,
    15% 85%,
    0% 85%
  );
}

七、滚动驱动动画

7.1 Scroll-driven Animations（CSS 原生）

/* 1. 基于滚动位置的动画 */
.scroll-animation {
  animation: fade-in linear;
  animation-timeline: scroll();
}

@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* 2. 带阈值的滚动动画 */
.scroll-threshold {
  animation: scale-up linear;
  animation-timeline: scroll(root block);
  animation-range: 0% 50%;
}

@keyframes scale-up {
  from {
    transform: scale(0.5);
  }
  to {
    transform: scale(1);
  }
}

/* 3. 进度指示器 */
.progress-bar {
  position: fixed;
  top: 0;
  left: 0;
  height: 4px;
  background: var(--color-primary);
  transform-origin: left;
  animation: grow linear;
  animation-timeline: scroll(root block);
}

@keyframes grow {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(1);
  }
}

/* 4. 视差背景 */
.parallax-bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  animation: parallax-move linear;
  animation-timeline: scroll();
}

@keyframes parallax-move {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(50%);
  }
}

/* 5. 滚动进入动画 */
.reveal {
  animation: reveal linear;
  animation-timeline: view();
  animation-range: entry 0% entry 40%;
}

@keyframes reveal {
  from {
    opacity: 0;
    transform: translateY(100px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

7.2 使用 JavaScript 实现滚动动画

/* CSS 准备 */
.js-scroll {
  opacity: 0;
  transform: translateY(50px);
  transition:
    opacity 0.6s ease,
    transform 0.6s ease;
}

.js-scroll.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.js-scroll-delay-1 {
  transition-delay: 0.1s;
}
.js-scroll-delay-2 {
  transition-delay: 0.2s;
}
.js-scroll-delay-3 {
  transition-delay: 0.3s;
}
.js-scroll-delay-4 {
  transition-delay: 0.4s;
}

/* 滚动进度 */
.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  background: linear-gradient(90deg, #ff6b6b, #feca57);
  z-index: 9999;
  width: 0%;
  transition: width 0.1s linear;
}

7.3 滚动吸附

/* 1. CSS 滚动吸附 */
.snap-container {
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-snap-points-x: repeat(300px);
}

.snap-item {
  scroll-snap-align: start;
}

/* 2. 多项目吸附 */
.snap-multiple {
  scroll-snap-type: x mandatory;
  display: flex;
  gap: 20px;
}

.snap-multiple > * {
  scroll-snap-align: start;
  flex: 0 0 300px;
}

/* 3. 粘性定位 */
.sticky-nav {
  position: sticky;
  top: 0;
  z-index: 100;
}

/* 4. 滚动容差 */
.scroll-padding {
  scroll-margin-top: 100px;
}

.scroll-padding:target {
  scroll-margin-top: 100px;
}

八、CSS 伪类高级应用

8.1 表单伪类

/* 1. 输入框状态 */
.input:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
}

.input:valid {
  border-color: #22c55e;
}

.input:invalid {
  border-color: #ef4444;
}

.input:placeholder-shown {
  background: #f9fafb;
}

.input:not(:placeholder-shown) {
  background: white;
}

/* 2. 范围验证 */
.range:in-range {
  border-color: #22c55e;
}

.range:out-of-range {
  border-color: #ef4444;
  animation: shake 0.5s;
}

@keyframes shake {
  0%,
  100% {
    transform: translateX(0);
  }
  25% {
    transform: translateX(-5px);
  }
  75% {
    transform: translateX(5px);
  }
}

/* 3. 只读/禁用状态 */
.input:read-only {
  background: #f3f4f6;
  cursor: not-allowed;
}

.input:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.input:enabled {
  background: white;
}

/* 4. 选中复选框 */
.checkbox:checked + label {
  color: var(--color-primary);
  font-weight: 500;
}

.checkbox:indeterminate + label {
  color: var(--color-warning);
}

/* 5. 自动填充样式 */
.input:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 30px white inset;
  -webkit-text-fill-color: #000;
}

8.2 结构伪类高级

/* 1. 复杂 nth-child */
.table tbody tr:nth-child(odd) {
  background: #f9f9f9;
}

.list > *:nth-child(3n + 1) {
  clear: left;
}

.article > *:nth-child(n + 4):nth-child(-n + 8) {
  font-size: 0.9em;
}

/* 2. 首字母/首行 */
.article::first-letter {
  font-size: 3em;
  float: left;
  line-height: 0.8;
  margin-right: 10px;
  color: var(--color-primary);
}

.article::first-line {
  font-weight: bold;
}

/* 3. 列表标记 */
.list-marker {
  list-style: none;
  padding: 0;
}

.list-marker > li {
  position: relative;
  padding-left: 20px;
}

.list-marker > li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 6px;
  height: 6px;
  background: var(--color-primary);
  border-radius: 50%;
}

/* 4. 表格样式 */
.table tr:first-child {
  font-weight: bold;
  background: #f5f5f5;
}

.table tr:last-child td:first-child {
  border-radius: 0 0 0 8px;
}

.table tr:last-child td:last-child {
  border-radius: 0 0 8px 0;
}

/* 5. 唯一元素 */
.unique:only-child {
  width: 100%;
}

/* 6. 空元素 */
.empty:empty {
  display: none;
}

.empty:empty::before {
  content: "暂无数据";
  color: #999;
}

8.3 用户交互伪类

/* 1. 焦点管理 */
.focus-ring:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.focus-ring:focus:not(:focus-visible) {
  outline: none;
}

/* 2. 悬停激活 */
.hover-card {
  transition: all 0.3s ease;
}

.hover-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
}

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

/* 3. 当前 URL */
.nav-link:target {
  background: var(--color-primary);
  color: white;
}

/* 4. 语言选择 */
:lang(zh) {
  font-family: "Noto Sans SC", sans-serif;
}

:lang(en) {
  font-family: "Inter", sans-serif;
}

/* 5. 方向伪类 */
:dir(ltr) {
  direction: ltr;
}

:dir(rtl) {
  direction: rtl;
  text-align: right;
}

/* 6. 本地时间 */
time:local {
  font-style: italic;
}

九、现代 CSS 选择器

9.1 :is() 和 :where()

/* 1. :is() 选择器组 */
:is(h1, h2, h3, h4) {
  margin-top: 0;
}

:is(.card, .modal, .alert) :is(h1, h2, h3) {
  color: var(--color-heading);
}

/* 2. :where() 零优先级 */
:where(.article, .blog, .post) p {
  line-height: 1.8;
}

/* 3. 复杂选择器简化 */
.header :is(.nav, .menu, .links) :is(a, button) {
  padding: 8px 16px;
}

/* 4. :not() 排除 */
.button:not(:disabled):not(.is-loading) {
  cursor: pointer;
}

.article :not(h1):not(h2):not(h3) {
  font-size: 1rem;
}

9.2 :has() 选择器

/* 1. 父元素选择器 */
.card:has(.badge) {
  padding-top: 40px;
}

.form:has(:invalid) .submit-btn {
  opacity: 0.5;
  pointer-events: none;
}

.grid:has(> :nth-child(6)) {
  grid-template-columns: repeat(3, 1fr);
}

/* 2. 兄弟选择器 */
.label:has(+ input:checked) {
  font-weight: bold;
}

.list-item:has(~ .list-item:hover) {
  background: #f5f5f5;
}

/* 3. 复杂条件 */
.button:has(.icon):has(.text) {
  padding: 12px 24px;
}

.card:has(.card-image):has(.card-body) {
  display: grid;
  grid-template-rows: auto 1fr;
}

/* 4. 表单验证 */
.form-field:has(input:invalid) .error-message {
  display: block;
}

.form-field:not(:has(input:invalid)) .error-message {
  display: none;
}

/* 5. 响应式选择 */
.container:has(.sidebar) {
  grid-template-columns: 1fr 250px;
}

9.3 属性选择器高级

/* 1. 模糊属性选择 */
[data-type^="image"] {
}
[data-type$=".png"] {
}
[data-type*="icon"] {
}

/* 2. 大小写敏感 */
[attribute="value" i] {
} /* 不区分大小写 */

/* 3. 复杂属性 */
[data-columns~="featured"] {
}
[data-theme*="dark" i] {
}
[class|="btn"] {
} /* 精确匹配或前缀- */

/* 4. 组合使用 */
input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus {
  border-color: var(--color-primary);
}

9.4 逻辑组合

/* 1. 多重选择 */
:is(header, footer):is(.dark, .light) {
  background: var(--bg);
}

/* 2. 嵌套否定 */
:not(:is(.a, .b)):not(:has(.c)) {
  /* 复杂的排除逻辑 */
}

/* 3. 范围选择 */
.column:nth-child(n + 4):nth-child(-n + 8) {
  /* 第4到8个元素 */
}

十、视觉特效与创意设计

10.1 锥形渐变

/* 1. 基础锥形渐变 */
.conic-basic {
  background: conic-gradient(red, yellow, lime, aqua, blue, magenta, red);
}

/* 2. 圆锥指针 */
.conic-indicator {
  background: conic-gradient(
    from 0deg,
    var(--color-primary) var(--progress, 0%),
    #e5e7eb var(--progress, 0%)
  );
}

/* 3. 渐变边框动画 */
.animated-border {
  background: conic-gradient(
    from var(--angle, 0deg),
    #ff6b6b,
    #feca57,
    #48dbfb,
    #ff9ff3,
    #ff6b6b
  );
  animation: rotate-border 3s linear infinite;
}

@keyframes rotate-border {
  to {
    --angle: 360deg;
  }
}

/* 4. 颜色选择器效果 */
.color-picker {
  background: conic-gradient(
    hsl(0, 100%, 50%),
    hsl(60, 100%, 50%),
    hsl(120, 100%, 50%),
    hsl(180, 100%, 50%),
    hsl(240, 100%, 50%),
    hsl(300, 100%, 50%),
    hsl(360, 100%, 50%)
  );
  border-radius: 50%;
}

10.2 网格背景

/* 1. 基础网格 */
.grid-bg {
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
  background-size: 50px 50px;
}

/* 2. 三角形网格 */
.triangle-grid {
  background:
    linear-gradient(120deg, #fff 12px, transparent 12px) 0 0,
    linear-gradient(240deg, #fff 12px, transparent 12px) 0 0,
    linear-gradient(0deg, #fff 12px, transparent 12px) 0 0;
  background-size: 24px 42px;
  background-color: var(--color-primary);
}

/* 3. 点阵背景 */
.dot-grid {
  background-image: radial-gradient(
    circle,
    rgba(255, 255, 255, 0.3) 1px,
    transparent 1px
  );
  background-size: 20px 20px;
}

/* 4. 同心圆 */
.concentric {
  background: radial-gradient(
    circle at center,
    transparent 0,
    transparent 10px,
    rgba(0, 0, 0, 0.1) 10px,
    rgba(0, 0, 0, 0.1) 11px,
    transparent 11px,
    transparent 20px
  );
  background-size: 100% 100%;
}

10.3 动态背景

/* 1. 渐变动画背景 */
.animated-gradient {
  background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
  background-size: 400% 400%;
  animation: gradient-shift 15s ease infinite;
}

@keyframes gradient-shift {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

/* 2. 浮动气泡 */
.bubbles {
  position: relative;
  overflow: hidden;
}

.bubbles::before,
.bubbles::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background-image:
    radial-gradient(
      circle at 20% 80%,
      rgba(255, 255, 255, 0.3) 0%,
      transparent 20%
    ),
    radial-gradient(
      circle at 80% 20%,
      rgba(255, 255, 255, 0.2) 0%,
      transparent 15%
    ),
    radial-gradient(
      circle at 40% 50%,
      rgba(255, 255, 255, 0.15) 0%,
      transparent 10%
    );
  animation: float 20s ease-in-out infinite;
}

@keyframes float {
  0%,
  100% {
    transform: translateY(0) rotate(0deg);
  }
  25% {
    transform: translateY(-10%) rotate(5deg);
  }
  50% {
    transform: translateY(0) rotate(0deg);
  }
  75% {
    transform: translateY(10%) rotate(-5deg);
  }
}

/* 3. 脉冲光晕 */
.pulse-glow {
  position: relative;
}

.pulse-glow::after {
  content: "";
  position: absolute;
  inset: -20px;
  background: radial-gradient(
    circle,
    rgba(59, 130, 246, 0.3) 0%,
    transparent 70%
  );
  animation: pulse-glow 2s ease-in-out infinite;
}

@keyframes pulse-glow {
  0%,
  100% {
    opacity: 0.5;
    transform: scale(1);
  }
  50% {
    opacity: 1;
    transform: scale(1.1);
  }
}

10.4 文字特效

/* 1. 文字描边 */
.stroke-text {
  color: transparent;
  -webkit-text-stroke: 2px white;
}

/* 2. 文字阴影堆叠 */
.shadow-stack {
  text-shadow:
    1px 1px 0 #000,
    2px 2px 0 #000,
    3px 3px 0 #000,
    4px 4px 0 #000,
    5px 5px 0 #000,
    6px 6px 10px rgba(0, 0, 0, 0.5);
}

/* 3. 文字渐变 */
.gradient-text {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* 4. 文字光晕 */
.glow-text {
  color: #fff;
  text-shadow: 0 0 10px currentColor;
}

/* 5. 文字动画 */
.typing-text {
  width: 0;
  overflow: hidden;
  white-space: nowrap;
  animation: typing 3s steps(20) forwards;
}

@keyframes typing {
  to {
    width: 100%;
  }
}

.blink-cursor::after {
  content: "|";
  animation: blink 1s infinite;
}

@keyframes blink {
  50% {
    opacity: 0;
  }
}

/* 6. 文字波动 */
.wave-text {
  display: inline-block;
}

.wave-text span {
  display: inline-block;
  animation: wave 1s ease-in-out infinite;
}

.wave-text span:nth-child(1) {
  animation-delay: 0s;
}
.wave-text span:nth-child(2) {
  animation-delay: 0.1s;
}
.wave-text span:nth-child(3) {
  animation-delay: 0.2s;
}
.wave-text span:nth-child(4) {
  animation-delay: 0.3s;
}
.wave-text span:nth-child(5) {
  animation-delay: 0.4s;
}

@keyframes wave {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}

十一、响应式设计进阶

11.1 高级媒体查询

/* 1. 范围查询 */
@media (400px <= width < 800px) {
  /* 特定范围 */
}

/* 2. 纵横比查询 */
@media (aspect-ratio: 16/9) {
  /* 宽屏 */
}

@media (aspect-ratio < 1/1) {
  /* 竖屏 */
}

/* 3. 分辨率查询 */
@media (min-resolution: 2dppx) {
  .high-res-image {
    background-image: url("image@2x.jpg");
  }
}

@media (min-resolution: 3dppx) {
  .high-res-image {
    background-image: url("image@3x.jpg");
  }
}

/* 4. 颜色查询 */
@media (color: 8) {
  /* 8位色彩 */
}

@media (monochrome) {
  /* 单色显示 */
}

/* 5. 交互媒体查询 */
@media (hover: hover) {
  /* 支持悬停 */
}

@media (pointer: fine) {
  /* 精细指针设备 */
}

@media (scripting: enabled) {
  /* JavaScript 可用 */
}

11.2 响应式排版

/* 1. Fluid Typography */
.fluid-type {
  font-size: clamp(
    1rem,
    /* 最小值 */ 0.75rem + 1vw,
    /* 可变值 */ 2rem /* 最大值 */
  );
}

/* 2. 高级 fluid 类型 */
:root {
  --font-size-min: 1;
  --font-size-max: 1.5;
  --font-size-preferred: 2vw;
}

.fluid-advanced {
  font-size: calc(
    var(--font-size-min) * 1rem +
      (var(--font-size-max) - var(--font-size-min)) * var(--font-size-preferred)
  );
}

/* 3. 响应式行高 */
.responsive-leading {
  line-height: clamp(1.4, 2cqi, 1.8);
}

/* 4. 响应式字间距 */
.responsive-tracking {
  letter-spacing: clamp(-0.02em, 0.05cqi, 0.1em);
}

/* 5. 响应式段落宽度 */
.measure {
  max-width: clamp(45ch, 65ch, 100%);
}

11.3 响应式间距与布局

/* 1. 响应式间距 */
.responsive-padding {
  padding: clamp(1rem, 3vw, 3rem);
}

/* 2. 响应式网格 */
.responsive-grid {
  display: grid;
  grid-template-columns: repeat(
    auto-fit,
    minmax(
      clamp(250px, 30vw, 350px),
      1fr
    )
  );
  gap: clamp(1rem, 2vw, 2rem);
}

/* 3. 响应式安全区 */
.safe-area {
  padding-top: max(env(safe-area-inset-top), 20px);
  padding-bottom: max(env(safe-area-inset-bottom), 20px);
  padding-left: max(env(safe-area-inset-left), 20px);
  padding-right: max(env(safe-area-inset-right), 20px);
}

/* 4. 容器查询响应式 */
@container card (min-width: 400px) {
  .card {
    flex-direction: row;
  }
}

@container card (min-width: 600px) {
  .card-image {
    width: 200px;
  }
}

/* 5. 视口单位响应式 */
.viewport-units {
  width: 100vw;
  height: 100vh;
  width: 100dvw;
  height: 100dvh;
}

---

## 十二、容器查询

### 12.1 容器查询基础

```css
/* 1. 定义容器 */
.card-container {
  container-type: inline-size;
  container-name: card;
}

/* 2. 容器样式查询 */
.card {
  display: flex;
  flex-direction: column;
  padding: 16px;
}

@container card (min-width: 400px) {
  .card {
    flex-direction: row;
    gap: 20px;
  }
}

@container card (min-width: 600px) {
  .card-image {
    width: 200px;
  }
  
  .card-content {
    flex: 1;
  }
}

12.2 容器相对单位

.container {
  container-type: inline-size;
}

/* cqi - 容器查询内联方向百分比 */
.element {
  width: 50cqi;
  height: 30cqb;
  font-size: 2cqw;
  padding: 5cqh;
}

/* 容器宽度的一半 */
.half-width {
  width: 50cqi;
}

/* 容器高度的响应式 */
.responsive-height {
  height: calc(20cqi * 2);
}

12.3 容器查询实战

/* 1. 图片画廊 */
.gallery {
  container-type: inline-size;
}

.gallery-item {
  display: grid;
  gap: 10px;
}

.gallery-item img {
  width: 100%;
  height: auto;
  object-fit: cover;
}

@container (min-width: 300px) {
  .gallery-item {
    grid-template-columns: 200px 1fr;
  }
}

@container (min-width: 500px) {
  .gallery-item {
    grid-template-columns: 1fr 1fr;
  }
}

/* 2. 文章卡片 */
.article-card {
  container-type: inline-size;
  container-name: article;
}

.article-card-title {
  font-size: 1rem;
  line-height: 1.4;
}

.article-card-excerpt {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

@container article (min-width: 400px) {
  .article-card-title {
    font-size: 1.25rem;
  }
  
  .article-card-excerpt {
    -webkit-line-clamp: 3;
  }
}

/* 3. 导航栏 */
.nav-container {
  container-type: inline-size;
}

.nav-brand {
  font-size: 1rem;
}

.nav-links {
  display: none;
}

@container (min-width: 600px) {
  .nav-links {
    display: flex;
    gap: 20px;
  }
  
  .nav-toggle {
    display: none;
  }
}

十三、CSS 性能优化

13.1 渲染性能

/* 1. GPU 加速 */
.gpu-accelerated {
  transform: translateZ(0);
  will-change: transform, opacity;
}

.gpu-hardware {
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
}

/* 2. 避免触发重排的属性 */
.bad-performance {
  /* 这些属性会触发重排 */
  width: 100px;
  height: 100px;
  margin: 10px;
  padding: 10px;
  top: 10px;
  left: 10px;
}

/* 推荐使用这些属性 */
.good-performance {
  transform: scale(1.1);
  opacity: 0.8;
  filter: blur(5px);
}

/* 3. contain 属性 */
.contained {
  contain: layout style paint;
}

.contained-strict {
  contain: strict;
}

.contained-content {
  contain: content;
}

/* 4. content-visibility */
.lazy-render {
  content-visibility: auto;
  contain-intrinsic-size: 0 500px;
}

.lazy-render-hidden {
  content-visibility: hidden;
}

13.2 选择器性能

/* 1. 避免低效选择器 */
.bad-selectors {
  /* 通配符 - 性能差 */
  * {
    box-sizing: border-box;
  }
  
  /* 过度嵌套 */
  .container .wrapper .sidebar .nav .item {
    padding: 10px;
  }
  
  /* 属性选择器开销大 */
  [data-id*="test"] {
    color: red;
  }
}

/* 2. 高效选择器 */
.good-selectors {
  /* 直接子选择器 */
  .nav > .nav-item {
    padding: 10px;
  }
  
  /* 类选择器优先 */
  .button-primary {
    background: blue;
  }
  
  /* 使用 specific 属性 */
  [type="submit"] {
    background: green;
  }
}

/* 3. 合并规则 */
.optimized {
  /* 合并相同规则的元素 */
  h1, h2, h3 {
    margin-top: 0;
    font-weight: bold;
  }
  
  /* 合并相同属性 */
  .btn-primary,
  .btn-secondary {
    padding: 12px 24px;
    border-radius: 8px;
  }
}

/* 4. 避免 @import */
.bad-import {
  /* @import 会阻塞渲染 */
}

.good-import {
  /* 使用 <link> 标签引入 CSS */
}

13.3 动画性能

/* 1. 动画优化 */
.smooth-animation {
  will-change: transform, opacity;
  transform: translateZ(0);
}

.animating-element {
  animation: slideIn 0.3s ease;
  animation-play-state: paused;
}

.animating-element:hover {
  animation-play-state: running;
}

/* 2. 使用 GPU 加速属性 */
.gpu-properties {
  transform: translate();
  transform: rotate();
  transform: scale();
  opacity: 0.5;
  filter: blur(0);
}

/* 3. 减少动画复杂度 */
.complex-animation {
  /* 复杂的 filter 动画性能差 */
}

.simple-animation {
  /* 简单的 transform 和 opacity 性能好 */
  transform: translateX(100px);
  opacity: 0.5;
}

/* 4. 使用 will-change 提示 */
.pre-animated {
  will-change: transform;
  transition: transform 0.3s ease;
}

.pre-animated:active {
  transform: scale(1.1);
}

/* 5. 减少绘制区域 */
.paint-optimized {
  /* 使用 transform 代替 position 动画 */
  transform: translateX(100px);
}

13.4 加载性能

/* 1. 关键 CSS 内联 */
.critical-css {
  /* 首屏关键样式内联 */
  .above-fold {
    display: flex;
    background: white;
  }
}

/* 2. 异步加载非关键 CSS */
.load-async {
  /* 使用 JavaScript 动态加载 */
}

/* 3. 预加载关键资源 */
.preload-fonts {
  /* <link rel="preload"> 在 HTML 中 */
}

/* 4. 字体加载优化 */
.font-optimization {
  font-display: swap;
}

.font-optimization-optional {
  font-display: optional;
}

/* 5. 图片优化 */
.lazy-image {
  loading: lazy;
}

.responsive-image {
  srcset: "image-400.jpg 400w, image-800.jpg 800w, image-1200.jpg 1200w";
  sizes: "(max-width: 400px) 400px, (max-width: 800px) 800px, 1200px";
}

十四、无障碍设计

14.1 焦点管理

/* 1. 焦点样式 */
.focus-visible {
  outline: none;
}

.focus-visible:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.focus-ring {
  outline: 2px solid transparent;
  transition: outline-color 0.2s;
}

.focus-ring:focus-visible {
  outline-color: var(--color-primary);
  outline-offset: 2px;
}

/* 2. 跳过链接 */
.skip-link {
  position: absolute;
  top: -100px;
  left: 0;
  background: var(--color-primary);
  color: white;
  padding: 10px 20px;
  z-index: 10000;
  transition: top 0.3s;
}

.skip-link:focus {
  top: 0;
}

/* 3. 焦点顺序 */
.focus-order {
  tab-index: 1;
}

/* 4. 焦点陷阱（模态框） */
.modal-trap:focus {
  /* 保持焦点在模态框内 */
}

14.2 颜色与对比度

/* 1. 对比度要求 */
.aa-large {
  /* 大文本（18px+）需要 3:1 对比度 */
  color: #767676;
  background: #ffffff;
}

.aa-normal {
  /* 正常文本需要 4.5:1 对比度 */
  color: #767676;
  background: #ffffff;
}

.aaa {
  /* AAA 级需要 7:1 对比度 */
  color: #595959;
  background: #ffffff;
}

/* 2. 不仅仅是颜色 */
.accessible-indicator {
  /* 不要只用颜色传达信息 */
  background: #ff0000;
  border-left: 4px solid #ff0000;
}

.accessible-icon {
  /* 添加图标辅助 */
  background: #007bff;
  padding-left: 20px;
}

.accessible-icon::before {
  content: "⚠️ ";
}

14.3 减少动画

/* 1. 检测用户偏好 */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* 2. 允许用户控制 */
.user-control {
  animation: fadeIn 0.3s ease;
}

@media (prefers-reduced-motion: reduce) {
  .user-control {
    animation: none;
  }
}

/* 3. 可访问的加载状态 */
.loading-indicator {
  /* 不要只用动画表示加载中 */
}

.loading-indicator::after {
  content: "加载中...";
  aria-live: "polite";
}

14.4 屏幕阅读器支持

/* 1. 隐藏内容但保持可访问 */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* 2. 显示给屏幕阅读器 */
.visible-sr {
  position: absolute;
  width: auto;
  height: auto;
  padding: inherit;
  margin: inherit;
  overflow: visible;
  clip: auto;
  white-space: normal;
}

/* 3. 链接目的 */
.link-purpose {
  /* 外部链接标识 */
}

a[href^="http"]::after {
  content: " (外部链接)";
  font-size: 0.8em;
  color: #666;
}

@media (prefers-reduced-motion: reduce) {
  a[href^="http"]::after {
    content: "";
  }
}

/* 4. 表单标签 */
.form-label {
  /* 确保每个输入都有标签 */
}

.visually-hidden + label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
}

14.5 ARIA 属性样式

/* 1. 展开/折叠 */
[aria-expanded="true"] .icon {
  transform: rotate(180deg);
}

[aria-expanded="false"] .icon {
  transform: rotate(0deg);
}

/* 2. 当前状态 */
[aria-current="page"] {
  font-weight: bold;
  border-bottom: 2px solid currentColor;
}

/* 3. 选中状态 */
[aria-selected="true"] {
  background: var(--color-primary);
  color: white;
}

/* 4. 必填状态 */
[aria-required="true"]::after {
  content: " *";
  color: red;
}

/* 5. 错误状态 */
[aria-invalid="true"] {
  border-color: red;
  background: #fff0f0;
}

[aria-invalid="true"] + .error-message {
  display: block;
  color: red;
}

十五、CSS 黑科技与奇技淫巧

15.1 纯 CSS 计数器

/* 1. 基础计数器 */
.counter {
  counter-reset: section;
}

.counter-item {
  counter-increment: section;
}

.counter-item::before {
  content: counter(section) ". ";
}

/* 2. 多级计数器 */
.multi-counter {
  counter-reset: chapter;
}

.chapter {
  counter-reset: section;
  counter-increment: chapter;
}

.chapter::before {
  content: "第" counter(chapter) "章 ";
}

.section {
  counter-increment: section;
}

.section::before {
  content: counter(chapter) "." counter(section) " ";
}

/* 3. 嵌套计数器 */
.nested-counter {
  counter-reset: item;
}

.nested-counter li {
  counter-increment: item;
  display: flex;
}

.nested-counter li::before {
  content: counters(item, ".") " ";
  margin-right: 10px;
}

/* 4. 罗马数字 */
.roman-counter {
  counter-reset: section;
}

.roman-counter-item {
  counter-increment: section;
}

.roman-counter-item::before {
  content: counter(section, upper-roman) ". ";
}

15.2 背景图案技巧

/* 1. 棋盘格图案 */
.checkerboard {
  background:
    linear-gradient(45deg, #ccc 25%, transparent 25%),
    linear-gradient(-45deg, #ccc 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #ccc 75%),
    linear-gradient(-45deg, transparent 75%, #ccc 75%);
  background-size: 20px 20px;
  background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
  background-color: #fff;
}

/* 2. 斜条纹 */
.diagonal-stripes {
  background: repeating-linear-gradient(
    45deg,
    #ff6b6b,
    #ff6b6b 10px,
    #ffffff 10px,
    #ffffff 20px
  );
}

/* 3. 同心圆 */
.concentric-circles {
  background:
    radial-gradient(circle at center, transparent 0, transparent 20px, #f0f0f0 20px, #f0f0f0 22px, transparent 22px),
    radial-gradient(circle at center, transparent 0, transparent 40px, #f0f0f0 40px, #f0f0f0 42px, transparent 42px),
    radial-gradient(circle at center, transparent 0, transparent 60px, #f0f0f0 60px, #f0f0f0 62px, transparent 62px);
}

/* 4. 波浪线 */
.wave-line {
  background: 
    linear-gradient(135deg, #ff6b6b 25%, transparent 25%) -20px 0,
    linear-gradient(225deg, #ff6b6b 25%, transparent 25%) -20px 0,
    linear-gradient(315deg, #ff6b6b 25%, transparent 25%),
    linear-gradient(45deg, #ff6b6b 25%, transparent 25%);
  background-size: 40px 40px;
  background-color: white;
}

/* 5. 网格点 */
.dot-grid {
  background-image: radial-gradient(circle, #ccc 1px, transparent 1px);
  background-size: 20px 20px;
}

15.3 交互黑科技

/* 1. 纯 CSS 复选框 */
.pure-checkbox {
  display: none;
}

.pure-checkbox + label {
  display: flex;
  align-items: center;
  cursor: pointer;
}

.pure-checkbox + label::before {
  content: '';
  width: 20px;
  height: 20px;
  border: 2px solid #ccc;
  border-radius: 4px;
  margin-right: 10px;
  transition: all 0.2s;
}

.pure-checkbox:checked + label::before {
  background: #3b82f6;
  border-color: #3b82f6;
}

.pure-checkbox:checked + label::after {
  content: '✓';
  position: absolute;
  left: 5px;
  color: white;
}

/* 2. 纯 CSS 手风琴 */
.accordion {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}

.accordion-toggle:checked ~ .accordion {
  max-height: 500px;
}

/* 3. 纯 CSS 选项卡 */
.tab input {
  display: none;
}

.tab content {
  display: none;
}

.tab input:checked + label + content {
  display: block;
}

/* 4. 纯 CSS Tooltip */
.tooltip {
  position: relative;
}

.tooltip::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  padding: 5px 10px;
  background: #333;
  color: white;
  font-size: 12px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s;
}

.tooltip:hover::after {
  opacity: 1;
}

15.4 视觉欺骗技巧

/* 1. 保持宽高比 */
.aspect-ratio {
  position: relative;
}

.aspect-ratio::before {
  content: '';
  display: block;
  padding-top: 56.25%; /* 16:9 */
}

.aspect-ratio-content {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* 2. 文字对齐到像素网格 */
.pixel-grid {
  line-height: 1.5;
  transform: translateY(0.5px);
}

/* 3. 隐藏滚动条但保持功能 */
.hide-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.hide-scrollbar::-webkit-scrollbar {
  display: none;
}

/* 4. 使用 caret-color */
.editable {
  caret-color: #ff6b6b;
}

/* 5. Selection 样式 */
::selection {
  background: #3b82f6;
  color: white;
}

::-moz-selection {
  background: #3b82f6;
  color: white;
}

15.5 数学魔法

/* 1. CSS 数学函数 */
.math-demo {
  /* clamp - 限制范围 */
  width: clamp(200px, 50%, 500px);
  
  /* min - 取最小值 */
  width: min(50%, 400px);
  
  /* max - 取最大值 */
  width: max(200px, 30%);
  
  /* abs - 绝对值（未来） */
  width: abs(-100px);
  
  /* sign - 符号（未来） */
  width: sign(-100px);
}

/* 2. 使用 round() */
.rounded-width {
  width: round(1.7, 1px); /* 1.7px */
}

/* 3. 使用 mod() */
.modulo {
  width: mod(100px, 30px); /* 10px */
}

/* 4. 使用 rem/rematch */
.remainder {
  width: 100px;
}

十六、自定义属性动画

16.1 @property 详解

/* 1. 带类型的自定义属性 */
@property --gradient-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

@property --primary-hue {
  syntax: '<number>';
  initial-value: 220;
  inherits: false;
}

@property --progress-value {
  syntax: '<percentage>';
  initial-value: 0%;
  inherits: false;
}

@property --shadow-size {
  syntax: '<length>';
  initial-value: 0px;
  inherits: false;
}

/* 2. 使用类型化属性 */
.typed-property {
  background: conic-gradient(
    from var(--gradient-angle),
    #ff6b6b,
    #feca57,
    #ff6b6b
  );
  animation: rotate-hue 3s linear infinite;
}

@keyframes rotate-hue {
  to {
    --gradient-angle: 360deg;
  }
}

16.2 动画渐变

/* 1. 旋转渐变边框 */
.animated-border {
  position: relative;
  padding: 20px;
  background: #1a1a1a;
}

.animated-border::before {
  content: '';
  position: absolute;
  inset: 0;
  padding: 3px;
  background: conic-gradient(
    from var(--angle, 0deg),
    #ff6b6b,
    #feca57,
    #48dbfb,
    #ff9ff3,
    #ff6b6b
  );
  -webkit-mask: 
    linear-gradient(#fff 0 0) content-box, 
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  animation: rotate-angle 3s linear infinite;
}

@keyframes rotate-angle {
  to {
    --angle: 360deg;
  }
}

/* 2. 进度条渐变 */
.progress-bar {
  --progress: 0%;
  height: 8px;
  background: linear-gradient(
    90deg,
    #ff6b6b 0%,
    #feca57 50%,
    #48dbfb 100%
  );
  background-size: 200% 100%;
  animation: progress-move 2s ease infinite;
}

@keyframes progress-move {
  0% {
    background-position: 100% 0;
  }
  100% {
    background-position: -100% 0;
  }
}

/* 3. 脉冲阴影 */
.pulse-shadow {
  --shadow-intensity: 1;
  box-shadow: 
    0 calc(10px * var(--shadow-intensity)) 
    calc(20px * var(--shadow-intensity)) 
    rgba(255, 0, 0, calc(0.3 * var(--shadow-intensity)));
  animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% {
    --shadow-intensity: 1;
  }
  50% {
    --shadow-intensity: 1.5;
  }
}

16.3 复杂动画效果

/* 1. 颜色转换动画 */
.color-transition {
  --hue: 0;
  background: hsl(var(--hue), 70%, 50%);
  animation: hue-rotate 5s linear infinite;
}

@keyframes hue-rotate {
  to {
    --hue: 360;
  }
}

/* 2. 尺寸缩放动画 */
.scale-animation {
  --scale: 1;
  transform: scale(var(--scale));
  animation: scale-pulse 1.5s ease-in-out infinite;
}

@keyframes scale-pulse {
  0%, 100% {
    --scale: 1;
  }
  50% {
    --scale: 1.2;
  }
}

/* 3. 多属性同时动画 */
.multi-animate {
  --rotate: 0deg;
  --scale: 1;
  --translate: 0px;
  
  transform: 
    rotate(var(--rotate))
    scale(var(--scale))
    translateX(var(--translate));
  
  animation: complex 3s ease-in-out infinite;
}

@keyframes complex {
  0% {
    --rotate: 0deg;
    --scale: 1;
    --translate: 0px;
  }
  50% {
    --rotate: 180deg;
    --scale: 1.5;
    --translate: 100px;
  }
  100% {
    --rotate: 360deg;
    --scale: 1;
    --translate: 0px;
  }
}

/* 4. 路径动画 */
.path-animation {
  offset-path: path('M 0 0 L 100 100');
  offset-distance: var(--travel, 0%);
  animation: travel 2s ease-in-out infinite;
}

@keyframes travel {
  0% {
    --travel: 0%;
  }
  100% {
    --travel: 100%;
  }
}

十七、层叠与优先级

17.1 选择器优先级

/* 1. 优先级计算 */
/* ID > Class > Element */
/* !important 最高 */

#unique { }                    /* 0-1-0-0 */
.class { }                     /* 0-0-1-0 */
.tag { }                       /* 0-0-0-1 */

/* 2. 组合优先级 */
#id .class tag                 /* 1-1-1 */
#id .class .child              /* 1-2-0 */
div.class                      /* 0-1-1 */

/* 3. :not() 不增加优先级 */
:not(.warning)                /* 0-0-1 */
#id :not(.warning)            /* 1-0-1 */

/* 4. :is() 和 :where() */
:is(h1, h2, .title)           /* 取最高的那个 */
:where(h1, h2, .title)         /* 始终为 0-0-0 */

/* 5. 内联样式优先级 */
[style="color: red"]          /* 1-0-0-0 */

/* 6. !important 优先级 */
!important                     /* 最高 */

17.2 层叠规则

/* 1. 样式来源优先级 */
.origin {
  /* 用户代理样式 < 用户样式 < 作者样式 < 作者 !important < 用户 !important */
}

/* 2. 重要声明 */
.critical {
  color: red !important;
  background: white !important;
}

/* 3. 避免过度使用 !important */
.avoid-important {
  /* 最好使用更具体的选择器 */
}

/* 4. 层叠上下文 */
.stacking-context {
  position: relative;
  z-index: 1;
}

.stacking-context > * {
  z-index: 10;
}

/* 5. 渲染顺序（从后到前） */
.layer-order {
  /* 1. 背景和边框（最底层）
     2. 负 z-index
     3. 块级盒子
     4. 浮动盒子
     5. 内联盒子
     6. z-index: 0
     7. 正 z-index */
}

17.3 @layer 层叠层

/* 1. 定义层 */
@layer base, components, utilities, overrides;

@layer base {
  html {
    font-size: 16px;
  }
  
  body {
    margin: 0;
  }
}

@layer components {
  .card {
    padding: 20px;
  }
}

@layer utilities {
  .text-center {
    text-align: center;
  }
}

@layer overrides {
  .card {
    padding: 40px; /* 覆盖 components 层的定义 */
  }
}

/* 2. 无序层（后来的层优先级更高） */
@layer reset {
  * {
    margin: 0;
  }
}

@layer base {
  body {
    margin: 10px; /* 覆盖 reset 层 */
  }
}

/* 3. 嵌套层 */
@layer framework {
  @layer base {
    .button {
      padding: 10px;
    }
  }
  
  @layer components {
    .button {
      padding: 20px;
    }
  }
}

/* 4. 取消层层包裹 */
@layer framework.base; /* 现在可以在外部访问 */

17.4 继承控制

/* 1. 继承属性 */
.inherit-all {
  /* 默认继承：大部分字体和文本属性 */
}

/* 2. 强制继承 */
.force-inherit {
  display: inherit;
  position: inherit;
  width: inherit;
}

/* 3. 阻止继承 */
.initial {
  color: initial;
  display: initial;
}

.unset {
  color: unset;
}

.revert {
  color: revert; /* 回到用户代理样式 */
}

.revert-layer {
  color: revert-layer; /* 回到当前层之前的值 */
}

/* 4. 全部重置 */
.reset-all {
  all: initial;
  /* 或 */
  all: unset;
}

十八、组件化设计模式

18.1 BEM 命名规范

/* 1. 基础 BEM */
.block {
  /* 块 */
}

.block__element {
  /* 元素 */
}

.block--modifier {
  /* 修饰符 */
}

/* 2. 实战示例 */
.card {
  padding: 20px;
  background: white;
  border-radius: 8px;
}

.card__header {
  margin-bottom: 16px;
}

.card__title {
  font-size: 1.5rem;
  font-weight: bold;
}

.card__image {
  width: 100%;
  height: auto;
}

.card--featured {
  border: 2px solid gold;
}

.card--dark {
  background: #1a1a1a;
  color: white;
}

/* 3. 嵌套 BEM */
.card__body__text {
  line-height: 1.6;
}

.card__body__actions {
  display: flex;
  gap: 10px;
}

/* 4. BEM 与修饰符组合 */
.button {
  padding: 12px 24px;
  border-radius: 4px;
}

.button--primary {
  background: blue;
  color: white;
}

.button--large {
  padding: 16px 32px;
  font-size: 1.2rem;
}

.button--primary.button--large {
  background: darkblue;
}

18.2 CSS 组件变体

/* 1. 组件变体系统 */
.component {
  /* 组件默认值 */
  --variant-bg: var(--color-primary);
  --variant-color: white;
  --variant-padding: 12px 24px;
  --variant-radius: 8px;
  
  background: var(--variant-bg);
  color: var(--variant-color);
  padding: var(--variant-padding);
  border-radius: var(--variant-radius);
}

/* 2. 变体修饰符 */
.component--secondary {
  --variant-bg: transparent;
  --variant-color: var(--color-primary);
  border: 2px solid currentColor;
}

.component--danger {
  --variant-bg: var(--color-danger);
}

.component--ghost {
  --variant-bg: transparent;
  --variant-color: var(--color-text);
}

.component--large {
  --variant-padding: 16px 32px;
}

.component--small {
  --variant-padding: 8px 16px;
}

/* 3. 组合变体 */
.btn.btn--primary.btn--large {
  /* 最具体 */
}

.btn--large.btn--primary {
  /* 同样具体 */
}

18.3 组件状态

/* 1. 组件状态管理 */
.card {
  /* 默认状态 */
  opacity: 1;
  transform: scale(1);
}

.card.is-loading {
  opacity: 0.6;
  pointer-events: none;
}

.card.is-disabled {
  opacity: 0.5;
  pointer-events: none;
}

.card.is-hidden {
  display: none;
}

.card.is-expanded {
  grid-row: span 2;
}

/* 2. 交互状态 */
.interactive {
  transition: all 0.2s ease;
}

.interactive:hover {
  transform: translateY(-2px);
}

.interactive:active {
  transform: translateY(0);
}

.interactive:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* 3. 数据状态 */
.state-empty::before {
  content: '暂无数据';
}

.state-error {
  border-color: var(--color-danger);
}

.state-success {
  border-color: var(--color-success);
}

/* 4. 主题状态 */
[data-theme="dark"] .card {
  background: #1a1a1a;
  color: white;
}

[data-theme="light"] .card {
  background: white;
  color: #1a1a1a;
}

18.4 组件组合

/* 1. 组件嵌套 */
.card {
  padding: 20px;
}

.card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.card__body {
  margin-bottom: 16px;
}

.card__footer {
  display: flex;
  gap: 10px;
}

/* 2. 组件变体组合 */
.card--featured .card__title {
  font-size: 2rem;
  color: gold;
}

.card--compact .card__header {
  margin-bottom: 8px;
}

.card--compact .card__footer {
  margin-top: 8px;
}

/* 3. 响应式组件 */
@media (min-width: 768px) {
  .card {
    display: flex;
  }
  
  .card__image {
    width: 300px;
    flex-shrink: 0;
  }
}

/* 4. 组件插槽 */
.slot-left {
  margin-right: auto;
}

.slot-right {
  margin-left: auto;
}

.slot-center {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

十九、动画库与实战

19.1 Animate.css 集成

/* 1. 基础动画类 */
.animate {
  animation-duration: 1s;
  animation-fill-mode: both;
}

.animate--fast {
  animation-duration: 0.3s;
}

.animate--slow {
  animation-duration: 2s;
}

/* 常用动画 */
.animate__fadeIn { animation-name: fadeIn; }
.animate__fadeInUp { animation-name: fadeInUp; }
.animate__fadeInDown { animation-name: fadeInDown; }
.animate__slideInLeft { animation-name: slideInLeft; }
.animate__bounce { animation-name: bounce; }
.animate__shake { animation-name: shake; }

/* 2. 延迟动画 */
.animate__delay-1 { animation-delay: 0.1s; }
.animate__delay-2 { animation-delay: 0.2s; }
.animate__delay-3 { animation-delay: 0.3s; }
.animate__delay-4 { animation-delay: 0.4s; }
.animate__delay-5 { animation-delay: 0.5s; }

/* 3. 无限动画 */
.animate__infinite {
  animation-iteration-count: infinite;
}

/* 4. 悬停触发动画 */
.hover-animate:hover {
  animation-name: bounce;
  animation-duration: 0.5s;
}

19.2 自定义动画系统

/* 1. 动画预设 */
:root {
  --ease-default: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
  --ease-smooth: cubic-bezier(0.4, 0, 0.6, 1);
  
  --duration-fast: 150ms;
  --duration-normal: 300ms;
  --duration-slow: 500ms;
}

/* 2. 动画工具类 */
.fade-enter {
  animation: fadeIn var(--duration-normal) var(--ease-default);
}

.fade-leave {
  animation: fadeOut var(--duration-fast) var(--ease-default);
}

.slide-enter {
  animation: slideInUp var(--duration-normal) var(--ease-default);
}

.slide-leave {
  animation: slideOutDown var(--duration-fast) var(--ease-default);
}

.scale-enter {
  animation: scaleIn var(--duration-normal) var(--ease-bounce);
}

.scale-leave {
  animation: scaleOut var(--duration-fast) var(--ease-default);
}

/* 3. 关键帧定义 */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes fadeOut {
  from { opacity: 1; }
  to { opacity: 0; }
}

@keyframes slideInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slideOutDown {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(20px);
  }
}

@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale(0.9);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes scaleOut {
  from {
    opacity: 1;
    transform: scale(1);
  }
  to {
    opacity: 0;
    transform: scale(0.9);
  }
}

19.3 页面过渡动画

/* 1. 页面容器 */
.page {
  animation: pageEnter var(--duration-normal) var(--ease-default);
}

.page.is-leaving {
  animation: pageLeave var(--duration-fast) var(--ease-default);
}

@keyframes pageEnter {
  from {
    opacity: 0;
    transform: translateX(20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes pageLeave {
  from {
    opacity: 1;
    transform: translateX(0);
  }
  to {
    opacity: 0;
    transform: translateX(-20px);
  }
}

/* 2. 视差滚动 */
.parallax-wrapper {
  perspective: 1000px;
  overflow-x: hidden;
}

.parallax-layer {
  transform-style: preserve-3d;
}

.parallax-back {
  transform: translateZ(-1px) scale(2);
}

.parallax-middle {
  transform: translateZ(-0.5px) scale(1.5);
}

.parallax-front {
  transform: translateZ(0);
}

/* 3. 列表动画 */
.list-enter {
  animation: listItemEnter 0.3s ease forwards;
}

@keyframes listItemEnter {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.list-leave {
  animation: listItemLeave 0.2s ease forwards;
}

@keyframes listItemLeave {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(10px);
  }
}

二十、CSS 调试技巧

20.1 常见问题诊断

/* 1. 布局问题 */
.debug-layout {
  outline: 2px solid red !important;
  outline-offset: -2px !important;
}

/* 2. 间距问题 */
.debug-spacing {
  outline: 2px dashed blue !important;
}

/* 3. 堆叠问题 */
.debug-zindex {
  position: relative;
  outline: 3px solid green !important;
}

/* 4. 尺寸问题 */
.debug-size {
  background: rgba(255, 0, 0, 0.1) !important;
}

/* 5. 显示问题 */
.debug-display {
  background: repeating-linear-gradient(
    45deg,
    transparent,
    transparent 10px,
    rgba(0, 0, 0, 0.1) 10px,
    rgba(0, 0, 0, 0.1) 20px
  ) !important;
}

20.2 调试工具类

/* 1. 边框调试 */
.debug-border {
  outline: 2px dashed red !important;
}

.debug-border-all > * {
  outline: 1px solid red !important;
}

/* 2. 颜色调试 */
.debug-colors > * {
  background: rgba(255, 0, 0, 0.1) !important;
}

/* 3. Flex 调试 */
.debug-flex {
  outline: 2px solid blue !important;
}

.debug-flex > * {
  outline: 1px dashed blue !important;
}

/* 4. Grid 调试 */
.debug-grid {
  outline: 2px solid green !important;
  background-image: 
    linear-gradient(rgba(0, 255, 0, 0.1) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 255, 0, 0.1) 1px, transparent 1px);
  background-size: 50px 50px;
}

/* 5. 居中调试 */
.debug-center {
  outline: 2px solid purple !important;
}

20.3 常见问题解决方案

/* 1. 外边距合并 */
.margin-collapse {
  /* 块级元素上下外边距会合并 */
  /* 解决方法： */
  display: flow-root;
  overflow: hidden;
  padding-top: 1px;
}

/* 2. Flex 溢出 */
.flex-overflow {
  min-width: 0;
  overflow: hidden;
}

/* 3. 高度计算 */
.height-calculation {
  height: auto;
  min-height: 0;
}

/* 4. 文字溢出 */
.text-overflow {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

/* 5. 浮动清理 */
.clearfix::after {
  content: '';
  display: table;
  clear: both;
}

二十一、未来 CSS 特性预览

21.1 容器查询（已支持）

/* 现代浏览器已支持 */
.card {
  container-type: inline-size;
}

@container (min-width: 400px) {
  .card {
    flex-direction: row;
  }
}

21.2 :has() 选择器（已支持）

/* 现代浏览器已支持 */
.card:has(.badge) {
  padding-top: 30px;
}

.form:has(:invalid) .submit {
  opacity: 0.5;
}

21.3 即将支持的功能

/* 1. 嵌套规则（部分支持） */
.parent {
  color: red;
  
  & .child {
    color: blue;
  }
  
  &:hover {
    color: green;
  }
}

/* 2. @when 条件规则 */
@when media(width >= 400px) and media(prefers-color-scheme: dark) {
  .card {
    background: darkgray;
  }
}

/* 3. @else 规则 */
@when media(width >= 400px) {
  .card {
    flex-direction: row;
  }
} @else {
  .card {
    flex-direction: column;
  }
}

/* 4. scroll-timeline */
.progress {
  animation: progress linear;
  animation-timeline: scroll();
}

@keyframes progress {
  from { width: 0; }
  to { width: 100%; }
}

/* 5. :focus-visible 改进 */
:is(:focus-visible, .force-focus) {
  outline: 2px solid blue;
}

/* 6. 颜色函数 */
.color-functions {
  /* relative 颜色语法 */
  color: oklch(from var(--primary) calc(l + 0.1) c h);
}

/* 7. 锚点定位 */
.popover {
  position-anchor: --button;
  position: absolute;
  position-try-fallbacks: flip-block, flip-inline;
  top: anchor(bottom);
}

二十二、实战案例集锦

22.1 响应式导航栏

/* 1. 基础导航 */
.navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 2rem;
  background: white;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.navbar-brand {
  font-size: 1.5rem;
  font-weight: bold;
}

.navbar-menu {
  display: flex;
  gap: 2rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.navbar-link {
  color: var(--color-text);
  text-decoration: none;
  transition: color 0.2s;
}

.navbar-link:hover {
  color: var(--color-primary);
}

/* 移动端菜单 */
.navbar-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: 10px;
  cursor: pointer;
}

.navbar-toggle span {
  width: 25px;
  height: 3px;
  background: var(--color-text);
  transition: all 0.3s;
}

/* 响应式 */
@media (max-width: 768px) {
  .navbar-toggle {
    display: flex;
  }
  
  .navbar-menu {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    background: white;
    padding: 1rem;
    gap: 1rem;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    display: none;
  }
  
  .navbar-menu.is-open {
    display: flex;
  }
}

22.2 卡片网格布局

/* 1. 响应式卡片 */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 2rem;
  padding: 2rem;
}

.card {
  display: flex;
  flex-direction: column;
  background: white;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s, box-shadow 0.3s;
}

.card:hover {
  transform: translateY(-10px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
}

.card-image {
  height: 200px;
  overflow: hidden;
}

.card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s;
}

.card:hover .card-image img {
  transform: scale(1.1);
}

.card-content {
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.card-title {
  font-size: 1.25rem;
  margin-bottom: 0.5rem;
}

.card-text {
  color: var(--color-text-secondary);
  flex: 1;
}

.card-footer {
  margin-top: auto;
  padding-top: 1rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* 2. 瀑布流布局 */
.masonry-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 5px;
  gap: 20px;
}

.masonry-item {
  border-radius: 8px;
  overflow: hidden;
}

.masonry-item:nth-child(1) { grid-row-end: span 31; }
.masonry-item:nth-child(2) { grid-row-end: span 40; }
.masonry-item:nth-child(3) { grid-row-end: span 25; }
.masonry-item:nth-child(4) { grid-row-end: span 35; }
.masonry-item:nth-child(5) { grid-row-end: span 28; }
.masonry-item:nth-child(6) { grid-row-end: span 20; }

22.3 表单组件

/* 1. 输入框样式 */
.form-group {
  margin-bottom: 1.5rem;
}

.form-label {
  display: block;
  margin-bottom: 0.5rem;
  font-weight: 500;
}

.form-label--required::after {
  content: " *";
  color: red;
}

.form-input {
  width: 100%;
  padding: 0.75rem 1rem;
  border: 2px solid var(--color-border);
  border-radius: 8px;
  font-size: 1rem;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.form-input:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
}

.form-input:invalid:not(:placeholder-shown) {
  border-color: var(--color-danger);
}

.form-input:valid:not(:placeholder-shown) {
  border-color: var(--color-success);
}

.form-error {
  color: var(--color-danger);
  font-size: 0.875rem;
  margin-top: 0.5rem;
  display: none;
}

.form-group:has(.form-input:invalid) .form-error {
  display: block;
}

/* 2. 按钮样式 */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.75rem 1.5rem;
  border: none;
  border-radius: 8px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}

.btn--primary {
  background: var(--color-primary);
  color: white;
}

.btn--primary:hover {
  background: var(--color-primary-dark);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4);
}

.btn--primary:active {
  transform: translateY(0);
}

.btn--secondary {
  background: transparent;
  color: var(--color-primary);
  border: 2px solid var(--color-primary);
}

.btn--secondary:hover {
  background: var(--color-primary);
  color: white;
}

.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

22.4 模态框组件

/* 1. 模态框基础 */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s, visibility 0.3s;
  z-index: 1000;
}

.modal-overlay.is-open {
  opacity: 1;
  visibility: visible;
}

.modal {
  background: white;
  border-radius: 16px;
  max-width: 500px;
  width: 90%;
  max-height: 90vh;
  overflow: auto;
  transform: scale(0.9) translateY(20px);
  transition: transform 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.modal-overlay.is-open .modal {
  transform: scale(1) translateY(0);
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.5rem;
  border-bottom: 1px solid var(--color-border);
}

.modal-title {
  font-size: 1.25rem;
  font-weight: bold;
}

.modal-close {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: none;
  cursor: pointer;
  border-radius: 8px;
  transition: background 0.2s;
}

.modal-close:hover {
  background: var(--color-border);
}

.modal-body {
  padding: 1.5rem;
}

.modal-footer {
  display: flex;
  gap: 1rem;
  justify-content: flex-end;
  padding: 1.5rem;
  border-top: 1px solid var(--color-border);
}

/* 2. 全屏模态框 */
.modal--fullscreen {
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  border-radius: 0;
}

二十三、最佳实践总结

23.1 编码规范

/* 1. 命名规范 */
/* 使用语义化的类名 */
.header { }
.navigation { }
.content { }
.sidebar { }
.footer { }

/* BEM 命名 */
.block { }
.block__element { }
.block--modifier { }

/* 组件命名 */
.button { }
.button--primary { }
.card { }
.card__header { }

/* 2. 代码组织 */
/* 按功能分组 */
.layout { }
.components { }
.utilities { }
.themes { }

/* 3. 选择器规范 */
/* 避免过度嵌套 */
.nav .nav-list .nav-item .nav-link {
  /* 太深 */
}

/* 简化 */
.nav-link {
  /* 更清晰 */
}

/* 4. 属性顺序 */
/* 布局 > 定位 > 尺寸 > 外观 > 排版 > 其他 */
.ordered {
  /* 布局 */
  display: flex;
  /* 定位 */
  position: absolute;
  top: 0;
  /* 尺寸 */
  width: 100%;
  height: auto;
  /* 外观 */
  background: white;
  color: black;
  /* 排版 */
  font-size: 16px;
  line-height: 1.5;
  /* 其他 */
  transition: all 0.3s;
}

23.2 性能清单

/* ✅ 推荐做法 */
.performance-dos {
  /* 使用 transform 和 opacity 动画 */
  transform: translateX(100px);
  opacity: 0.5;
  
  /* 使用 will-change 提示 */
  will-change: transform;
  
  /* 使用 contain 限制重绘 */
  contain: layout style paint;
  
  /* 使用 content-visibility */
  content-visibility: auto;
  
  /* 合并 CSS 规则 */
  h1, h2, h3 {
    margin: 0;
  }
  
  /* 使用硬件加速 */
  transform: translateZ(0);
}

/* ❌ 避免做法 */
.performance-donts {
  /* 动画性能差的属性 */
  width: 100%;
  height: 100%;
  left: 10px;
  top: 10px;
  
  /* 过度使用 !important */
  !important
  
  /* 通配符选择器 */
  * { }
  
  /* 深层嵌套 */
  .a .b .c .d .e { }
  
  /* @import */
  @import url('style.css');
}

23.3 无障碍清单

/* ✅ 无障碍要点 */
.a11y-dos {
  /* 焦点可见 */
  outline: 2px solid var(--color-primary);
  
  /* 颜色对比度 */
  color: #595959;
  background: #ffffff;
  
  /* 支持减少动画 */
  @media (prefers-reduced-motion: reduce) {
    * {
      animation: none;
      transition: none;
    }
  }
  
  /* 语义化 */
  button { cursor: pointer; }
  
  /* 表单标签 */
  label { display: block; }
}

/* ❌ 避免做法 */
.a11y-donts {
  /* 不要只用颜色传达信息 */
  /* 添加图标或文字 */
  
  /* 不要移除焦点样式 */
  /* outline: none; */
  
  /* 不要使用闪烁动画 */
  animation: blink 1s infinite;
}

23.4 响应式清单

/* ✅ 响应式要点 */
.responsive-dos {
  /* 使用相对单位 */
  width: 50%;
  font-size: 1rem;
  
  /* 使用 clamp 流体排版 */
  font-size: clamp(1rem, 2vw, 2rem);
  
  /* 使用媒体查询断点 */
  @media (min-width: 768px) { }
  
  /* 使用容器查询 */
  @container (min-width: 400px) { }
  
  /* 考虑触摸设备 */
  min-height: 44px; /* 触摸目标尺寸 */
}

/* ❌ 避免做法 */
.responsive-donts {
  /* 固定宽度 */
  width: 1200px;
  
  /* 隐藏而不是适配 */
  display: none;
  
  /* 只考虑桌面 */
  /* 应该移动优先 */
}
# css3 # 前端 # css
Logo
亚马逊云科技技术品牌专区

更多推荐

last30days-skill 快速上手：3步把30天社交媒体数据变成直观图表

last30days-skill 是一个 AI agent 研究技能，能跨 Reddit、X、YouTube、Hacker News、Polymarket 抓取任意话题近30天的讨论，并按真实用户互动量打分排序。本文带你走一遍"取数 → 清洗校验 → 画图"的完整流程，做完手里就有一张自己的话题趋势图。## 效果先看：30天讨论长什么样[![last30days-skill 随仓库附带的统

avatar 亚马逊云科技技术品牌专区

OBS Studio 完整指南：免费开源录屏与直播软件从零上手

想做一场像模像样的直播，或者把屏幕内容录成教程视频，但一想到商用软件的订阅费就有些犹豫？其实你不需要花一分钱。OBS Studio 是一款免费开源的直播与录屏软件，支持 Windows、macOS 和 Linux，采集、混音、编码、推流、录制，一条流水线全包了。## 先搞清楚 OBS Studio 是什么OBS Studio 是一个"场景化"的采集合成工具：你把摄像头、窗口、浏览器、图片、

avatar 亚马逊云科技技术品牌专区

如何用MediaCrawler爬取小红书抖音数据？7大平台爬虫从安装到实战完整指南

MediaCrawler 是一个支持小红书、抖音、快手、B站、微博、百度贴吧、知乎的开源自媒体数据采集工具。它能按关键词、按帖子、按创作者主页三种方式抓取笔记/视频内容、评论甚至二级评论，并把结果存成 JSON、CSV、Excel 或数据库。适合做市场调研、竞品监控、内容选题的运营人员，以及想要现成爬虫框架而不想从零写 JS 逆向的开发者。## 从一次"手动抄数据"说起想象这个场景：你负责

avatar 亚马逊云科技技术品牌专区