首页 › CSS › 进阶话题 › 计数器与形状

CSS 计数器

用于自动编号（章节、列表）。

/* 重置计数器 */
body { counter-reset: section; }

/* 递增 */
h2::before {
  counter-increment: section;
  content: "第 " counter(section) " 节 ";
}

嵌套计数器

body { counter-reset: chapter; }

h2 {
  counter-reset: section;
  counter-increment: chapter;
}
h2::before {
  content: counter(chapter) ". ";
}

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

shape-outside 文字环绕

img.circle {
  float: left;
  shape-outside: circle(50%);
  /* 文字沿圆形路径环绕 */
  clip-path: circle(50%);
}

img.polygon {
  shape-outside: polygon(0 0, 100% 0, 60% 100%, 0% 100%);
}

scroll-behavior

html {
  scroll-behavior: smooth;  /* 平滑滚动 */
}

overscroll-behavior

.sidebar {
  overscroll-behavior: contain;  /* 阻止滚动链（不滚动页面） */
}

小结

属性	作用
counter-reset	重置计数器
counter-increment	递增计数器
counter() / counters()	显示计数器值
shape-outside	文字环绕形状
scroll-behavior	平滑滚动
overscroll-behavior	滚动链控制

上一节：CSS 函数详解 下一节：BEM 命名方法论

贡献者: 布欧-Lewyon