CSS Reference 上可以查到哪些 CSS 属性和分类?

CSS Reference 是一个免费的 CSS 可视化指南，按功能把常用 CSS 属性分成若干集合（Collections），每个属性配图示或动画示例。想查某个属性属于哪一类、或按主题浏览有哪些属性可查，可以直接从下面的分类和属性清单入手。

分类总览

网站首页列出的集合包括：

Animations（动画）
Backgrounds（背景）
Box model（盒模型）
Flexbox
CSS Grid（标注为 New!）
Positioning（定位）
Transitions（过渡）
Typography（排版）

各分类下的具体属性

Animations

animation-delay、animation-direction、animation-duration、animation-fill-mode、animation-iteration-count、animation-name、animation-play-state、animation-timing-function、animation

Backgrounds

background-attachment、background-clip、background-color、background-image、background-origin、background-position、background-repeat、background-size、background

Box model

border-bottom-color、border-bottom-left-radius、border-bottom-right-radius、border-bottom-style、border-bottom-width、border-bottom、border-collapse、border-color、border-left-color、border-left-style、border-left-width、border-left、border-radius、border-right-color、border-right-style、border-right-width、border-right、border-style、border-top-color、border-top-left-radius、border-top-right-radius、border-top-style、border-top-width、border-top、border-width、border、box-sizing、height、line-height、margin-bottom、margin-left、margin-right、margin-top、margin、max-height、max-width、min-height、min-width

Flexbox

align-content、align-items、align-self、flex-basis、flex-direction、flex-flow、flex-grow、flex-shrink、flex-wrap、justify-content、order

CSS Grid

grid-area、grid-auto-columns、grid-auto-flow、grid-auto-rows、grid-column-end、grid-column-gap、grid-column-start、grid-column、grid-gap、grid-row-end、grid-row-gap、grid-row-start、grid-row、grid-template-areas、grid-template-columns、grid-template-rows、grid-template、grid

Positioning

bottom、clear、display、float、left、position、right、top

Transitions

（首页集合中列出 Transitions 分类，具体属性名未在给定资料中逐条展开）

Typography

color、font-family、font-size、font-style、font-variant、font-weight、font、letter-spacing、line-height、list-style-image、list-style-position、list-style-type、list-style

其他

box-shadow、content、cursor、mix-blend-mode、opacity、outline-color、outline-style、outline-width、overflow-wrap、overflow-x、overflow-y

怎么用这份清单

按属性名定位：如果你已经知道要查的属性（比如 grid-template-columns），直接看它属于哪个分类，就能判断该去哪个集合里找示例。
按主题浏览：想系统看某一类效果（比如布局用 Flexbox 还是 Grid），先进入对应集合，再逐个属性看图示。
注意标注：CSS Grid 在首页被标为 New!，说明它是较新加入的内容，查网格布局时优先看这一组。

每个属性页面用插图和动画演示效果，适合在写样式时快速确认某个属性的表现，而不是只记语法。