到底哪些属性属于CSS3的范畴?

几年前,HTML5和CSS3就开始慢慢的成为了热门词,到现在为止说道前端开发,不知道HTML5和CSS3简直是弱爆了。最关键的是现代浏览器对这个支持总体还算是可以的,虽然有个别差异,但还是可以接受的。
那么问题来了,不管是跟人沟通探讨,还是自己使用的时候,遇到一些CSS属性,会拿捏不准到底哪些是CSS2的,哪些是CSS3的,简直让人晕的慌,这个也不怪你,有的浏览器会在规范出来前就把属性实现出来让大家尝鲜。但作为一个FE,不敢说全部属性区分清楚,常用的一些还是要知道的,不然面试或者是跟人沟通的时候就囧了。

到底哪些属性属于CSS3的范畴?

下面贴一个对照表出来,大家看看能记住多少就算多少了。当然你觉得这个还不够,可以移步到w3c上看看那些指定CSS规范的大牛们,到底在干些什么。

边框(Border)
border-color
border-image
border-radius
box-shadow
背景(Background)
background-origin
background-clip
background-size
Multiple backgrounds
颜色(Color)
HSL colors
HSLA colors
opacity
RGBA colors
文本(Text effects)
text-shadow
text-overflow
word-wrap
用户界面(User-interface)
box-sizing
resize
outline
outline-width
outline-style
outline-offset
outline-color
nav-index
nav-up
nav-right
nav-down
nav-left
基础盒模型(Basic box model)
overflow
overflow-x
overflow-y
内容(Generated Content)
content
其它模块(Other modules)
media queries
speech
columns
column-width
column-span
column-rule
column-rule-color
column-rule-width
column-rule-style
column-gap
column-fill
column-count
column-break-before
column-break-after
@font-face
选择器(selectors)
子串匹配的属性选择符 E[att^="val"]
子串匹配的属性选择符 E[att$="val"]
子串匹配的属性选择符 E[att*="val"]
结构性伪类 E:root
结构性伪类 E:nth-child(n)
结构性伪类 E:nth-last-child(n)
结构性伪类 E:nth-of-type(n)
结构性伪类 E:nth-last-of-type(n)
结构性伪类 E:last-child
结构性伪类 E:first-of-type
结构性伪类 E:only-child
结构性伪类 E:only-of-type
结构性伪类 E:empty
UI元素状态伪类 E:checked
UI元素状态伪类 E:enabled
UI元素状态伪类 E:disabled
UI元素状态伪类 E::selection
否定伪类 E:not(s)
目标伪类 E:target
通用兄弟元素选择器 E ~ F

相关阅读