CSS3都有哪些新特性呢?

html-css05

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/

2002 年 5 月 15 日发布了 CSS3 Line 模块,该模块规范了文本行模型。

2002 年 11 月 7 日发布了 CSS3 Lists 模块,该模块规范了列表样式。

2002 年 11 月 7 日还发布了 CSS3 Border 模块,新添加了背景边框功能。该模块后来被合并到了背景模块中。

2003 年 5 月 14 日发布了 CSS3 Generated and Replaced Content 模块,定义了 CSS3 的生成及更换内容功能。

2003 年 8 月 13 日发布了 CSS3 Presentation Levels 模块,定义了演示效果功能。

2003 年 8 月 13 日还发布了 CSS3 Syntax 模块,该模块重新的定义了 CSS 语法基础。

2004 年 2 月 24 日发布了 CSS3 Hyperlink Presentation 模块,重新定义了超链接表示规则。

2004 年 12 月 16 日发布了 CSS3 Speech 模块,该模块重新定义了语音“样式”规则。

2005 年 12 月 15 日发布了 CSS3 Cascading and Inheritance 模块,定义了 CSS 层叠和继承规则。

2007 年 8 月 9 日发布了 CSS3 Basic Box 模块,该模块重新定义了 CSS 基本盒模型规则。

2007 年 9 月 5 日发布了 CSS3 Grid Positioning 模块,定义了 CSS 网格定位规则。

2009 年 3 月 20 日发布了 CSS3 Animations 模块,定义了 CSS 动画模型。

2009 年 3 月 20 日还发布了 CSS3 3D Transforms 模块,定义了 CSS 3D 转换模型。

2009 年 6 月 18 日发布了 CSS3 Fonts 模块,定义了 CSS 字体模式。

2009 年 7 月 23 日发布了 CSS3 Image Values 模块,定义了图像内容显示模型。

2009 年 7 月 23 日还发布了 CSS3 Flexible Box Layout 模块,定义了灵活的框布局模型。

2009 年 12 月 1 日发布了 CSS3 2D Transforms 模块,定义了 2D 转换模型。

2010 年 4 月 29 日发布了 CSS3 Generated Conten for Paged Media 模块,定义了分页媒体内容模型。

2010 年 10 月 5 日发布了 CSS3 Text 模块,定义了文本模型。

2010 年 10 月 5 日还发布了 CSS3 Background and Borders 模块,该模块重新补丁了边框和背景模型

选择器有1. 属性选择器 2. 结构伪类选择器 3. UI元素状态伪类选择器 4. 目标伪类选择器 5. 否定选择器 6. 通用兄弟选择器

input[type='checkbox']        这个是说在input标签下有一个type属性是checkbox的元素

input[type='checkbox']::after{/* ::after伪元素选择器,这里给是复选框的子体 */

content: ""/* ::after子体内容 */

}