CSS3和CSS2.1的区别

CSS3和CSS2.1的区别

大家都知道我们习惯性称作的 CSS3 对于 CSS2.1 有很多的修改和补充。抛开浏览器的兼容性问题，这里把所有的变化整理到一份表格中便于学习和查阅  。不能保证没有遗漏，欢迎大家补充。

新增的 属性	新增的每个属性新值	新增的选择器	其它 新特性
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	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)	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)	@font-face Media Queries Keyframe animations using @keyframes Conditional styles using @supports Namespacing using @namespace Regions Filters 注：仍在变化中的特性 　　 Counter Styles Level 3 Device Adaptation Display Module Level 3 Line Grid Mobile Text Size Adjustment CSS Variables Box Alignment The "all" property Exclusions and Shapes Generated Content for Paged Media Grid Layout Grid Template Layout Line Layout Module New features in Lists and Counters Overflow Module New features in Paged Media New features in CSS Sizing Media Queries Level 4 Selectors Level 4 ch units Viewport relative lengths New resolution units Compositing and Blending New features in CSS speech The unicode-range descriptor for @font-face New features in CSS Images and Replaced Content CSS Masking

CSS3 模块编辑

CSS3被拆分为"模块"。 

旧规范已拆分成小块，还增加了新的。

一些最重要CSS3模块如下：

• 选择器
• 盒模型
• 背景和边框
• 文字特效
• 2D/3D转换
• 动画
• 多列布局
• 用户界面