现代 CSS 设计技巧

279 字

1 分钟

现代 CSS 设计技巧

2026-04-08

技术

CSS

/

前端

/

设计

现代 CSS 的力量#

CSS 在近年来经历了巨大的演变，许多强大的新特性正在改变我们编写样式的方式。

1. CSS 自定义属性#

1
:root {
2
  --primary: hsl(250, 55%, 55%);
3
  --radius: 1rem;
4
  --shadow: 0 4px 14px rgba(0, 0, 0, 0.06);
5
}
6

7
.card {
8
  background: white;
9
  border-radius: var(--radius);
10
  box-shadow: var(--shadow);
11
  border: 1px solid var(--primary);
12
}

2. 容器查询#

容器查询允许组件根据其容器的大小来调整样式：

1
.container {
2
  container-type: inline-size;
3
}
4

5
@container (min-width: 600px) {
6
  .card {
7
    display: grid;
8
    grid-template-columns: 1fr 2fr;
9
  }
10
}

3. 级联层#

@layer 让你更好地控制样式的优先级：

1
@layer base, components, utilities;
2

3
@layer base {
4
  h1 { font-size: 2rem; }
5
}
6

7
@layer components {
8
  .btn { padding: 0.5rem 1rem; }
9
}

4. 颜色函数#

新的颜色函数让颜色操作变得简单：

1
.element {
2
  /* oklch - 感知均匀的颜色空间 */
3
  color: oklch(0.7 0.15 250);
4

5
  /* color-mix - 混合两种颜色 */
6
  background: color-mix(in srgb, blue 30%, white);
7
}

5. 视图过渡 API#

1
@view-transition {
2
  navigation: auto;
3
}
4

5
::view-transition-old(root) {
6
  animation: fade-out 0.3s ease;
7
}
8

9
::view-transition-new(root) {
10
  animation: fade-in 0.3s ease;
11
}