众所周知的CSS2大约出现在1998年，自那以来，互联网已经产生了翻天覆地的变化。在这期间，W3C对于CSS的标准的最近一次最新是在2011年，这时发布了CSS2.1版本。而后发布的CSS3让人觉得似乎与CSS2之间应该会有很大的区别，事实也确实是这样的。CSS3相较于之前的版本可以说有了质的飞跃，并且现在几乎所有主流的浏览器都开始支持CSS3了，当然也同时支持HTML5。
CSS3与CSS2之间最大的区别在于模块的分离，以前的版本一般在一个大的文件中实现各种不同的所有功能。而在CSS3中则被分成了多个模块，各个模块具有独立的功能，并且不会破坏旧版本的兼容性。到目前为止，已经有四大主要的模块已经发布出来，它们是：1、媒体查询（Media Queries） 2、命名空间（Namespaces） 3、三级选择器（Selectors Level 3 ） 4、颜色设置（Color）
媒体查询对于CSS来说是非常重要的，它的作用很简单：它允许在不同条件下使用到不同的样式，以适合于各种屏幕尺寸。 媒体查询允许开发人员定制不同的分辨率的样式，而无需更改或删除内容。 媒体查询的使用方法也很简单，如下代码：
@media screen and (max-width: 600px) {
background: #FFF;
}
通过媒体查询，你可以将以上样式应用到一个最大为600像素宽度的设备中，在这个例子中，设备的背景将显示为白色。当然，最大宽度并不是唯一条件，你也可以设置最小宽度或是组合起来使用。例如下面的例子中，样式将应用到一个可视面积为600到900像素的设备中：
@media screen and (min-width: 600px) and (max-width: 900px) {
background: #FFF;
}
CSS3也可以为便携式设备制作预定义的样式，如专门针对于IPad或IPone的特定样式：
<link rel="stylesheet" media="only screen and (-webkit-min-device-pixel-ratio: 2)" type="text/css" href="iphone4.css" /> <link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css"/> <link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css"/>
从上面可以看出，通过媒体查询可以让开发人员很方便的为不同的设备设置不同的显示样式。
CSS3的另外一个新的功能则是实现了圆角边框，这对于开发人员来说是一个好消息。因为可以直接在CSS中定义圆角，而不必通过图片或是CSS Hack的方式。遗憾的是，这一功能在早期版本的IE中无法正常显示。下面是一段示例代码：
-moz-border-radius: 5px; -webkit-border-radius: 5px; border: 2px solid #897048;
另外，还可以采用类似以下的代码来定义文字的阴影：
text-shadow: 2px 2px 2px #ddccb5;
也可以采用类似以下的代码来实现多重背景的功能：
.multiplebackgrounds {
height: 100px;
width: 200px;
padding: 20px;
background: url(top.gif) top right no-repeat,
url(bottom.gif) top left repeat-y,
url(middle.gif) bottom repeat-z;
}
浏览器前缀的功能得以继续保留，这样可以有针对性的让特定的浏览器读懂你的代码：
-moz- : Firefox -webkit- : Safari, Chrome -o- : Opera -ms- : Internet Explorer
此外，在CSS3中还定义了一些新的伪类，如:only-child，:empty，:first-of-type，:first-child，:root等。