CSS3 高阶使用技巧实战

CSS3 高阶使用技巧实战

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

---

目录

1. [Flexbox 高级布局](#Flexbox 高级布局)
2. [Grid 布局高阶应用](#Grid 布局高阶应用)
3. [CSS 变量深度应用](#CSS 变量深度应用)
4. 动画与过渡进阶
5. [3D 变换与空间效果](#3D 变换与空间效果)
6. 滤镜与混合模式
7. 滚动驱动动画
8. [CSS 伪类高级应用](#CSS 伪类高级应用)
9. [现代 CSS 选择器](#现代 CSS 选择器)
10. 视觉特效与创意设计
11. 响应式设计进阶
12. 容器查询
13. [CSS 性能优化](#CSS 性能优化)
14. 无障碍设计
15. [CSS 黑科技与奇技淫巧](#CSS 黑科技与奇技淫巧)
16. 自定义属性动画
17. 层叠与优先级
18. 组件化设计模式
19. 动画库与实战
20. [CSS 调试技巧](#CSS 调试技巧)
21. [未来 CSS 特性预览](#未来 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;
  
  /* 只考虑桌面 */
  /* 应该移动优先 */
}