CSS3

CSS3（层叠样式表）这项技术的升级版本是在1999年制定的2001年5月23日，W3C完成了CSS3的工作草案，主要包括盒子模型、列表模块、超链接方式、语言模块、背景和边框、文字特效、多栏布局等模块。 www.qwbaike.cn

CSS发展的一个主要变化是W3C 将CSS3分成一系列模块的决定。浏览器厂商按照CSS的节奏快速创新，所以通过采用模块化的方法，CSS3规范中的元素可以以不同的速度发展，因为不同的浏览器厂商只支持给定的特性。然而，不同的浏览器在不同的时间支持不同的功能，这也使得跨浏览器开发变得复杂。

早在2001年，W3C就完成了CSS3的规范草案。CSS3规范的一个新特性是它被分成几个独立的模块。一方面，通过将模块分成几个更小的模块，有利于规范的及时更新和发布，有利于模块内容的及时调整这些模块都是独立实现和发布的，这也为以后CSS的扩展打下了基础。另一方面，由于支持设备和浏览器厂商的限制，设备或厂商可以选择性地支持CSS3的部分模块和子集，有利于CSS3的普及。

CSS3编程工具和CSS一样，任何文本编辑工具都可以用来编写，比如：在Windows下写书、记事本；或其他专门用于编辑网页文本的工具，如：Intelligent a、Eclipse、MyEclipse、webstorm、sublimetext；此外，还有专门为前端开发的插件，比如：Emmet。

CSS3的原理和CSS一样，都是在网页中自定义样式表的选择器，然后在大量的网页中引用这些选择器。 www.qwbaike.cn

(标度函数标度(旋转功能旋转(和倾斜函数偏斜(变形可以简单实现，但是变形中的所有矩阵函数都可以使用矩阵(函数来代替 www.qwbaike.cn

CSS3的语法基于CSS的原始版本，它允许用户在标签中指定特定的HTML元素，而无需使用多余的类、Identification or Java Script language。CSS选择器大部分都不是CSS3中新加入的，只是在之前的版本中没有被广泛使用。如果你想达到一个干净的、轻量级标签和更好的结构和性能分离，高级选择器非常有用，可以减少标签中的class和id数量，让设计人员更容易维护样式表。 www.qwbaike.cn

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

1、边框特性 www.qwbaike.cn

CSS3对网页中的边框进行了一些改进，主要包括支持圆角边框、多层边框、边框色彩与图片等。在CSS3中最常用的一个改进就是圆角边框，通过CSS3的属性可以快速实现圆角定义，同时还可以根据实际情况针对特定角进行圆角定义。 www.qwbaike.cn

2、多背景图 www.qwbaike.cn

CSS3允许使用多个属性（比如background-image、background-repeat、background-size、background-position、background-origin和background-clip等）在一个元素上添加多层背景图片。该属性的应用大大改善了以往面对多层次设计需要多层布局的问题，帮助Web前端开发者在不借助Photoshop的情况下实现对页面背景的设计，简化了背景图片的维护成本。 www.qwbaike.cn

3、颜色与透明度

CSS3颜色模块的引入，实现了制作Web效果时不再局限于RGB和十六进制两种模式。CSS3增加了HSL、HSLA、RGBA几种新的颜色模式。这几种颜色模式的提出，在做开发的时候不仅可以设置元素的色彩，还能根据需要轻松地设定元素透明度。

4、多列布局与弹性盒模型布局

CSS3多列布局属性可以不使用多个div标签就能实现多列布局。CSS3中的多列布局模块描述了如何像报纸、杂志那样，把一个简单的区块拆成多列，并通过相应属性来实现列数、列宽、各列之间的空白间距。弹性盒模型布局方便了Web前端开发者根据复杂的前端分辨率进行弹性布局，轻松地实现页面中的某一区块在水平、垂直方向对齐，是进行响应式网站开发的一大利器。

www.qwbaike.cn

5、盒子的变形 www.qwbaike.cn

在CSS2.1中，想让某个元素变形必须要借助JavaScript写大量的代码实现，在CSS3中加入了变形属性，该属性在2D或3D空间里操作盒子的位置和形状，来实现例如旋转、扭曲、缩放或者移位。变形属性的出现，使Web前端中的元素展示不仅仅局限在二维空间，Web前端开发者可以通过旋转、扭曲、缩放或者移位等操作实现元素在三维控件上的展示。通过变形元素，web前端中的内容展示更加形象、真实。 www.qwbaike.cn

6、过渡与动画

CSS3的“过渡”（transition）属性通过设定某种元素在某段时间内的变化实现一些简单的动画效果，让某些效果变得更加具有流线性与平滑性。CSS3的“动画”（animation）属性能够实现更复杂的样式变化以及一些交互效果，而不需要使用任何Flash或JavaScript脚本代码。过渡与动画的出现，使CSS在Web前端开发中不再仅仅局限于简单的静态内容展示，而是通过简单的方法使页面元素动了起来，实现了元素从静到动的变化。 www.qwbaike.cn

7、Web字体 www.qwbaike.cn

CSS3中引入了@font-face，@font-face是链接服务器字体的一种方式，这些嵌入的字体能变成浏览器的安全字体，开发人员不用再担心用户没有这些字体而导致网页在用户浏览器无法正常显示的问题。

www.qwbaike.cn

8、媒体查询 www.qwbaike.cn

CSS3中引入媒体查询（mediaqueries），可为不同分辨率的设备定义不同的样式。比如，在可视区域小于480像素时，可能想让原来在右侧的网站侧栏显示在主内容的下边，以往必须通过JavaScript判断用户浏览器的分辨率，然后再通过JavaScript修改CSS。CSS3中只需要通过媒体查询就可实现上述操作。 www.qwbaike.cn

9、阴影 www.qwbaike.cn

阴影主要分为两种：文本阴影（text-shadow）和盒子阴影（box-shadow）。文本阴影在CSS2中已经存在，但没有得到广泛的运用（CSS2.1中删除了）。CSS3延续了这个特性，并进行了新的定义，该属性提供了一种新的跨浏览器解决方案，使文本看起来更加醒目。CSS3中的盒子阴影的引入，可轻易地为任何元素添加盒子阴影。

www.qwbaike.cn

浏览器厂商以前就一直在实施CSS3，虽然它还未成为真正的标准，但却提供了针对浏览器的前缀：

www.qwbaike.cn

Chrome（谷歌浏览器）：-webkit-

www.qwbaike.cn

Safari（苹果浏览器）：-webkit-

www.qwbaike.cn

Firefox（火狐浏览器）：-moz-

www.qwbaike.cn

lE（IE浏览器）：-ms- www.qwbaike.cn

Opera（欧朋浏览器）：-0- www.qwbaike.cn

例如，CSS3渐变样式在Firefox和Safari中是不同的。Firefox使用-moz-linear-gradient，而Safari使用-webkit-gradient，这两种语法都使用了厂商类型的前缀。

需要注意的是，在使用有厂商前缀的样式时，也应该使用无前缀的。这样可以保证当浏览器移除了前缀，使用标准CSS3规范时，样式仍然有效。​​ www.qwbaike.cn

www.qwbaike.cn

1、降低开发成本和维护成本 www.qwbaike.cn

在CSS3出现之前，为了实现圆角效果，开发者往往需要添加额外的HTML标签，并使用一张或多张图片来完成，而使用CSS3只需要一个标签，并使用CSS3中的边框-可以完成半径属性。这样，CSS3技术就可以把人从画图中转移出来、剪切图片，优化图片。如果以后需要调整这个圆角的弧度或者颜色，使用CSS2.1需要从头开始画、只能通过裁剪地图来实现，使用CSS3时只需要修改边框-可以快速修改半径属性值。

CSS3提供的动画特性可以让开发者在实现一些动态按钮或者动态导航的时候远离JavaScript，让开发者不用 不需要花很多时间写脚本或者寻找合适的脚本插件来适应一些动态的网站效果。

2、提高页面性能

许多CSS3技术通过提供相同的视觉效果而变得图形化“替代品”换句话说，在Web开发中，减少冗余的标签嵌套和使用的图片数量意味着用户将下载更少的内容和更快地加载页面。另外，图片比较少、脚本和Flash文件可以减少用户访问网站时的HTTP请求数量，这是加速页面加载的最佳方式之一。使用CSS3制作图形化网站，不需要任何图片，大大减少了HTTP请求的数量，提高了页面的加载速度。比如CSS3的动画效果，可以减少对JavaScript和Flash文件的HTTP请求，但是可能需要浏览器进行大量的工作来渲染这种动画效果，可能导致浏览器响应缓慢，用户流失。所以在使用一些复杂特效的时候，需要考虑清楚。事实上，许多CSS3技术可以在任何情况下极大地提高页面的性能。

www.qwbaike.cn

CSS3将完全向后兼容，因此不需要修改的设计来保持它们的工作。网络浏览器也将继续支持CSS2。