基于 CSS3 的下一代 Web 应用开发，第 1 部分: 发展历史及新特性
?
CSS3 规范的全面推广和支持看起来还遥遥无期，但是目前主流浏览器都已迫不及待的开始支持 CSS3 部分特性了。虽然这部分特性还相对较少，但是这些以前很难使用 Javascript 和图片实现的效果依然令程序要兴奋不已。下面就简单介绍一下主流浏览器实现的一些 CSS3 新特性。
属性选择器
在 CSS3 中新添加了三个属性选择器 [att^="value"] [att$="value"] [att*="value"] 用来匹配属性中间包含某些特定的值。例如：
?当设定一个 RGBA 色彩的时候，参数依次设定为红、蓝、和绿色的颜色值，可以是 0-255 或百分数。最后一个参数为透明值应该在 0 到 1 之间，例如 0.5 代表 50% 的透明度。RGBA 和 Opacity 之间的不同点是前者只会应用到指定的元素上，而后者会影响我们指定的元素及其子元素。
目前支持 RBGA 颜色的浏览器有 WebKit 核心系列浏览器、Firefox 3+ 和 Opera 9.5+，IE 全系列浏览器都不支持。
多栏布局
这是新的 CSS3 选择器可以让你不用使用多个 div 标签就能实现多栏布局。浏览器解释这个属性并生成多栏，让文本实现一个仿报纸的多栏结构。tweetCC在其首页上将介绍文字显示为四栏，这四栏并非浮动的 div 而是使用下面的 CSS3 多栏布局：
?目前多栏布局目前被 Webkit 核心系列浏览器和 Firefox 2+ 浏览器支持。
多背景图
CSS3 允许你使用多个属性比如 background-image、background-repeat,、background-size、 background-position、background-originand 和 background-clip 等在一个元素上添加多层背景图片。在一个元素上添加多背景的最简单的方法是使用简写代码，你可以指定上面的所有属性到一条声明中，只是最常用的还是 image, position 和 repeat:
?目前支持形变的浏览器有 Webkit 系列浏览器、FireFox3.5+、Opear10.5+。
Word Wrap
word-wrap 属性用来防止太长的字符串溢出的。可以用两个属性值 normal 和 break-word。normal 值 ( 默认的 ) 只在允许的断点截断文字，如连字符。如果使用了 break-word ，文字可以在任何需要的地方截断以匹配分配的空间并防止溢出。
目前该属性被 IE8、Webkit 核心浏览器、Firefox3.5+、Opear10+ 支持。
块阴影与圆角阴影
尽管在 CSS2 中就已经存在，box-shadow、text-shadow 是两个未被广泛应用的 CSS 属性。它们将在 CSS3 中被广泛采用。这两个属性给设计师一个新的跨浏览器的工具来为设计添加一个维度以使文字和边框更加醒目、具有立体感。从此你不再需要 Photoshop 去处理很多复杂零碎的图片了。
?前两个属性设置阴影的 X/Y 位移，这里分别是 10px，第 3 个属性定义阴影的虚化程度，最后一个设置阴影的颜色。
目前这个属性被 webkit 核心浏览器、FireFox3.1+、Opera9.5+ 支持。
圆角
CSS3 新功能中最常用的一项就是圆角效果，Border-radius 无需背景图片就能给 HTML 元素添加圆角。不同于添加 Javascript 或多于的 HTML 标签，仅仅需要添加一些 CSS 属性并从好的方面考虑。这个方案是清晰的和比较有效的，而且可以让你免于花费几个小时来寻找精巧的浏览器方案和基于 Javascript 圆角。
?目前 IE9、webkit 核心浏览器、FireFox3+ 都支持该属性。
边框图片
border-image 属性允许你在元素的边框上设定图片，让你从通常的 solid、 dotted 和其它边框样式中解放出来。该属性给设计师一个更好的工具，用它可以方便的定义设计元素的边框样式，比 background-image 属性 ( 对高级设计来说 ) 或枯燥的默认边框样式更好用。我们也可以明确的定义一个边框可以被如何缩放或平铺。
?目前支持的浏览器有 Webkit 核心浏览器、FireFox3.1+。
形变
在过去在 web 中想要达到 rotate 旋转、scale 伸缩、skew 倾斜这些效果，我们通常需要依赖于图片或者 Flash。在 CSS3 通过 transform 实现一些形变的效果将变得非常简单。
在变形属性中，我们可以通过 transform-origin 指定变形的起始点（比如对象的中心或者右上角等）。还可以指定变形的类型（也称为变形函 数），并在函数后面的括号中指定的变形的程度。比如，translate(10px, 20px) 将会把相应的元素从原位置右移 10 个像素，下移 20 个像素。其他支持的变形函数还包括：旋转（rotate）、伸缩（scale）、倾斜 （skew）。
目前支持形变的浏览器有 Webkit 系列浏览器、FireFox3.5+、Opear10.5+，IE 全系列不支持。
?
使用 CSS 没有做不到的效果，只有你不敢想象的，前一阵我就惊讶的发现一个使用纯 CSS 和 HTML 实现的多啦 A 梦卡通效果。CSS3 为我们带来的惊喜不只是简单功能性增强，更多的是一种对 Web UI 设计理念和方法的变革。CSS3 结合 HTML5 使得 Web 应用可以提供和本地应用程序一样甚至更强大的功能，并且有更好的用户体验，同时也不需要额外安装软件，不必对软件版本升级兼容性等麻烦问题担忧。可以畅想，在未来的 PC 上我们已经不需要操作系统以及任何其他应用程序，开机只需要一个浏览器就可以解决所有问题。相信未来 CSS3 配合 HTML5 标准，将极大的引起一场 Web 应用的变革，甚至是整个 Internet 产业的变革。
