CSS3都有哪些新特性呢?

html-css017

CSS3都有哪些新特性呢?,第1张

第 1 选择器

第 2 RGBA和透明度

第 3 多栏布局

第 4 多背景图

第 5 Word Wrap

第 6 文字阴影

第 7 @font-face属性

第 8 圆角(边框半径)

第 9 边框图片

第 10 盒阴影

第 11 盒子大小

第 12 媒体查询

第 13 语音

扩展资料:

工作原理

CSS3原理同CSS,是在网页中自定义样式表的选择符,然后在网页中大量引用这些选择符[29]。

新增特性中transform的原理较为特殊,虽然使用位移函数translate()、缩放函数scale()、旋转函数rotate()和倾斜函数skew()可以简单地实现变形,但是变形中的矩阵函数都可以使用matrix()函数来代替。

新增特性

CSS3的新特征有很多,例如圆角效果、图形化边界、块阴影与文字阴影、使用RGBA实现透明效果、渐变效果、使用@Font-Face实现定制字体、多背景图、文字或图像的变形处理(旋转、缩放、倾斜、移动)、多栏布局、媒体查询等。

参考资料:百度百科-css3

CSS3 新特性

包括

CSS3 选择器(Selector)

@Font-face 特性、

Word-wrap &Text-overflow 样式

Text-decoration

多列布局(multi-column layout)

边框和颜色,颜色支持透明度(color, border)

渐变效果(Gradient)

阴影(Shadow)和反射(Reflect)效果

盒子模型

Transitions, Transforms 和 Animation

比如:@Font-face 特性

@font-face {

font-family: BorderWeb

src:url(BORDERW0.eot)

}

@font-face {

font-family: Runic

src:url(RUNICMT0.eot)

}

.border { FONT-SIZE: 35pxCOLOR: blackFONT-FAMILY: "BorderWeb" }

.event { FONT-SIZE: 110pxCOLOR: blackFONT-FAMILY: "Runic" }

更多参考:http://www.ibm.com/developerworks/cn/web/1202_zhouxiang_css3/

W3C文档这样描述的:The keyword ‘only’ can also be used to hide style sheets from older user agents. User agents must process media queries starting with ‘only’ as if the ‘only’ keyword was not present.

翻译过来就是:only是为了在不支持媒体查询的浏览器中隐藏样式表,浏览器处理以only开头的关键词时将会忽略only。

@media only screen and (min-width:xxx) and (max-width:xxx) 与 @media screen and (min-width:xxx) and (max-width:xxx) 在支持媒体查询的浏览器中其实是一模一样的,没有任何区别,因为only将被忽略。但是在不支持媒体查询的浏览器中由于没有only这个媒体类型,因此会直接忽略这条媒体查询。在不支持媒体查询的浏览器中,如果不加only,@media screen and (min-width:xxx) and (max-width:xxx)将会被解析为@media screen,明显与期望不一致。因此通过加一个浏览器不认识的媒体类型only则浏览器将会直接忽略这条媒体查询。

media="only screen and (min-width: 401px) and (max-width: 600px)"

/* 在支持媒体查询的浏览器中等于*/

media="screen and (min-width: 401px) and (max-width: 600px)"

/*在不支持媒体查询的浏览器中解析到带only的媒体查询时,会将only视为媒体类型。(由于没有only这种媒体类型,因此将不会被应用)*/

media="only"

/*如果不带only,在不支持媒体查询的浏览器中*/

media="screen and (min-width: 401px) and (max-width: 600px)"

/*将被解析为screen,将会被应用到屏幕类型设备上*/

media="screen"