大家都知道我们习惯性称作的 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
仍在变化中的特性
上面的列表并不详尽,还有很多仍然在发展中的规范,并没有太多的浏览器支持,下面是这些新模块的列表。
- 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
http://www.ecsspert.com/css3-logos/apple.php#comments
相关推荐
内容包括CSS2.1和大部分CSS3 所有手册内容都写有对IE6, IE7, IE8, IE9, Firefox, Chrome, Safari, Opera支持程度 每个属性及其它相关内容都有可浏览的DEMO示例 手册的在线版也适当的使用了一些CSS3,感兴趣的朋友...
让IE7 IE8 完全支持CSS2.1和部分CSS3标准。
CSS手册2.1,学习CSS最好不过了,不要错过哦
css常用代码大全(html+css代码).pdfcss常用代码大全(html+css代码).pdfcss常用代码大全(html+css代码).pdfcss常用代码大全(html+css代码).pdfcss常用代码大全(html+css代码).pdfcss常用代码大全(html+css代码).pdf
html+css+个人网站成熟模板+适合期末作业html+css+个人网站成熟模板+适合期末作业html+css+个人网站成熟模板+适合期末作业html+css+个人网站成熟模板+适合期末作业html+css+个人网站成熟模板+适合期末作业html+css+...
div+css百分比表格+DIV+CSS+JS静态分页程序+DIV+CSS像素表格 百分比表格(用DIV+CSS)以百分比显示,可以根据窗口的大小自动调节所显示的大小! DIV+CSS+JS静态分页程序可兼容主流浏览器(IE、FF、Opera) DIV+CSS表格...
css+css3+html+html4+js离线手册
HTML+CSS+JavaScript+php+mysql帮助手册(内含html5+css3+javascript5帮助手册)。
@import url(/style/css/global.css); /*全局样式*/ @import url(/style/css/skyblue.css); /*个性化样式*/ body { background: url(img/body_bg.gif); } /*文档级样式*/ </style> 目前受浏览器支持的设备类型仅...
CSS 2.1(中英文)官方文档
div +cssdiv +cssdiv +cssdiv +cssdiv +cssdiv +cssdiv +cssdiv +cssdiv +cssdiv +css
div+css例子div+css例子div+css例子div+css例子div+css例子div+css例子div+css例子div+css例子div+css例子div+css例子div+css例子div+css例子div+css例子div+css例子div+css例子div+css例子div+css例子div+css例子...
HTML5+CSS3+JS,教程,源代码 javascript 很好的开发编辑教程 下载试读
css 经典手册,能够让你快速掌握css的一些属性和方法
CSS+DIV布局案例CSS+DIV布局案例CSS+DIV布局案例CSS+DIV布局案例
HTML+CSS 完成登录页面UI HTML+CSS 完成登录页面UI HTML+CSS 完成登录页面UI HTML+CSS 完成登录页面UI HTML+CSS 完成登录页面UI HTML+CSS 完成登录页面UI HTML+CSS 完成登录页面UI HTML+CSS 完成登录...
html+css3+javascript 学习demohtml+css3+javascript 学习demo html+css3+javascript 学习demohtml+css3+javascript 学习demo html+css3+javascript 学习demohtml+css3+javascript 学习demo html+css3+javascript ...
响应式css+兼容手机+平板+电脑PC 拼图跨屏响应式布局前端开发CSS框架-综合示例
Django新闻博客类网站,前端技术(html + css + js + jquery(ajax))、后端技术(Django2.1 + Django restframework + mysql + redis + celery(可能会拓展) + elaticsearch + nginx + uwsgi) Django新闻博客类...