最全的 CSS2.1 和 CSS3+ 的区别一览

大家都知道我们习惯性称作的 CSS3 对于 CSS2.1 有很多的修改和补充。抛开浏览器的兼容性问题，这篇文章把所有的变化整理到一篇文章中便于学习和查阅。尽管我尽量确保收录了所有的新特性，但是不能保证没有遗漏，欢迎大家留言。

新属性

下面是 CSS3 新增的 CSS3 属性列表。

• animation (and eight associated longhand properties)
• background-clip
• background-origin
• background-size
• border-radius (and four associated longhand properties)
• border-image (and six associated longhand properties)
• box-decoration-break
• box-shadow
• box-sizing
• columns (and thirteen associated multi-column properties)
• clear-after
• flex (and eleven associated flexbox properties)
• font-stretch
• font-size-adjust
• font-synthesis
• font-kerning
• font-variant-caps
• hanging-punctuation
• hyphens
• icon
• image-resolution
• image-orientation
• line-break
• object-fit
• object-position
• opacity
• outline-offset
• overflow-wrap / word-wrap
• backface-visibility
• perspective
• perspective-origin
• pointer-events (for HTML)
• resize
• tab-size
• text-align-last
• text-decoration-line
• text-decoration-skip
• text-decoration-position
• text-decoration-style
• text-emphasis (and three associated properties)
• text-justify
• text-orientation
• text-overflow
• transform
• transform-style
• text-shadow
• transition (and four associated longhand properties)
• word-break
• word-spacing
• writing-mode

新的值

在 CSS3 中为 CSS2.1 新增的取值，下面是每个属性新值的列表。

• Value “local” for the background-attachment property
• Value "rgba()" for any property that accepts a color value
• Value "hsl()" for any property that accepts a color value
• Value "hsla()" for any property that accepts a color value
• Value "currentColor" for any property that accepts a color value
• Value "inset()" for the clip property
• Value "linear-gradient()" for any property that accepts an image value
• Value "radial-gradient()" for any property that accepts an image value
• Value "repeating-linear-gradient()" for any property that accepts an image value
• Value "repeating-radial-gradient()" for any property that accepts an image value
• Value "image()" for any property that accepts an image value
• Multiple comma-separated images for any property that accepts an image value
• Multiple comma-separated background-related values to match multiple background image declarations
• Value "center" for the position property
• Value "page" for the position property
• Value "space" for the background-repeat property
• Value "round" for the background-repeat property
• 15 new values for the cursor property
• Values "flex" and "inline-flex" for the display property
• Values "all-small-caps", "petite-caps", "all-petite-caps", "titling-caps", and "unicase" for the font-variant property
• Multiple, space-separated values for the letter-spacing property
• New values for the text-align property, including "<string>", "match-parent", "start", "end", and "start end"
• text-decoration is now a shorthand property
• Keywords "hanging" and "each-line" declared along with length or percentage values for the tfext-indent property
• Value "full-width" for the text-transform property
• rem units for lengths
• calc() units for lengths
• toggle() units
• Angle units (deg, grad, rad, turn)
• Time units (s, ms)

新选择器

下面是 CSS3 中新增的选择器。

• Substring matching attribute selectors ([att^=val], [att$=val], [att*=val])
• :target pseudo-class
• New pseudo-classes: :enabled, :disabled, :checked, and :indeterminate
• :root pseudo-class
• New expression-based structural pseudo-classes: :nth-child(), :nth-last-child(), :nth-of-type(), :nth-last-of-type()
• Other new structural pseudo-classes: :last-child, :first-of-type, :last-of-type, :only-child, :only-of-type, :empty
• The negation pseudo-class :not()
• Four pseudo-elements with double-colon syntax (::first-line, ::first-letter,::before, ::after)
• The following-sibling combinator (p ~ img)
• ::selection pseudo-class (removed from the spec, but everyone uses it)

其它新特性

其它 CSS2.1 没有包含的特性。

• @font-face
• Media Queries
• Keyframe animations using @keyframes
• Conditional styles using @supports
• Namespacing using @namespace
• Regions
• Filters

仍在变化中的特性