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

randyjin

2014-11-14

关注关注

　大家都知道我们习惯性称作的 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)