这个博客已经过去了很久……

不过,你可以通过以下方式找到我

现在的位置: 首页 > 谈前端 > CSS > 正文
最全的 CSS3 和 CSS2.1 的区别
2013年02月28日 CSS ⁄ 共 4064字 评论数 27

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

仍在变化中的特性

  上面的列表并不详尽,还有很多仍然在发展中的规范,并没有太多的浏览器支持,下面是这些新模块的列表。

 

  1. Hi, I think your website might be having browser compatibility issues. When I look at your website in Chrome, it looks fine but when opening in Internet Explorer, it has some overlapping. I just wanted to give you a quick heads up! Other then that, very good blog!

  2. I’m really impressed with your writing skills as well as with the layout on your blog. Is this a paid theme or did you customize it yourself? Either way keep up the nice quality writing, it is rare to see a nice blog like this one nowadays..

  3. I like the worthwhile info you supply within your posts.I’ll bookmark your blog and investigate yet again listed here recurrently.I’m quite convinced I will be taught quite a bit of recent stuff perfect right here! Excellent luck for the subsequent!

  4. Wow, marvelous blog layout! How long have you been blogging for? you made blogging look easy. The overall look of your site is excellent, let alone the content!. Thanks For Your article about 最全的 CSS3 和 CSS2.1 的区别 | HighSea的小站 .

  5. Pingback: Baju bayi

  6. Pingback: New apk android

  7. Pingback: google

  8. Pingback: yvRrgfWP

  9. Pingback: Google

  10. Pingback: Google

  11. Pingback: Google

  12. Pingback: Eve Online Overview

  13. Pingback: Eve online Salvaging

  14. Pingback: God Help

  15. Pingback: iqtest

  16. Pingback: Beaded

  17. Pingback: Green coffee bean max

  18. Pingback: floor heating

  19. Pingback: free banner exchange

  20. Pingback: Quantenheilung Braunschweig

  21. Pingback: Marco

  22. Pingback: Google

友荐云推荐
×