初识CSS3的强大功能

这篇文章是目前少数一些介绍即将取代CSS2的新标准——CSS3的文章。我们将从非常基础的东西开始讲解，即使你对CSS3毫无了解，读完了之后相信也能很好的介绍这些将被广泛使用的一些功能。

什么是CSS3

CSS3带来的一些改变，为你在创造新的具有冲击力的设计提供更多方法。这篇教程提供了一些关于这个新标准带给我们的一些可能性。

模块

CSS3的开发被分为不同的“模块”。之前的划分方法太过于庞大、复杂，以至于更新十分困难，所以它被打散，并且有所增添。其中的一部分模块包括：

• 盒模型
• 列表模型
• 超链接的表现
• 语音模块
• 背景以及边框
• 文字效果
• 多栏布局

察看模块的完整列表

开发日程

包括SVG（可缩放矢量图型）、媒体查询和命名空间的一些模块已经完全开发完毕。其他的也会很快跟进。但是预测众多浏览器合适才能支持CSS3的新功能确实无比的困难。Safari的新版本已经支持了一些。

准确的说想在近两年内完成对CSS3的大范围支持是不太可能的事情，因为微软向来不太支持标准化。FF和Safari的支持加起来也不到一半的用户量，对CSS3的推广不是决定性的。但是IE支持若干CSS3属性确实相当有可能的，例如IE8已经支持一些选择符语法。长期之内，我们还会和hacks打交道。

CSS3将如何影响我？

CSS3能完全的向后兼容，这样我们就不用更改先用得设计。浏览器也会继续支持CSS2。

主要的冲击来自于新的选择符使用方法以及新的属性。这些能帮助我们实现一些新的功能（比如动画或渐变效果），或者改良现有设计（比如说使用列）。

这一系列文章的之后部分会介绍CSS3的一些模块以及他们的新功能。

CSS3模块——边框

用过CSS的人都知道border属性——它是一个构建内容结构、创造图片相框以及改善页面结构的好方法。CSS3将border属性提升到另一个高度，它允许使用渐变、圆角、阴影或图片来创造边框。我们来一一解说。

圆角边框

使用现在的CSS2完成圆角边框很困难，虽然有很多种可用的办法，可是没有一个是直接了当的。往往都涉及额外的图片。

用CSS3创建圆角边框则非常简单，代码如下：

.border_rounded {  background-color: #ddccb5;  -moz-border-radius: 5px;  -webkit-border-radius: 5px;  border: 2px solid #897048;  padding: 10px;  width: 310px;  }  

渐变边框

渐变边框用起来可以让内容看起来很显眼。

这些代码有些复杂，要求你定义渐变中的每个颜色：

.border_gradient {  border: 8px solid #000;  -moz-border-bottom-colors:#897048 #917953 #a18a66 #b6a488 #c5b59b #d4c5ae #e2d6c4 #eae1d2;  -moz-border-top-colors:  #897048 #917953 #a18a66 #b6a488 #c5b59b #d4c5ae #e2d6c4 #eae1d2;  -moz-border-left-colors: #897048 #917953 #a18a66 #b6a488 #c5b59b #d4c5ae #e2d6c4 #eae1d2;  -moz-border-right-colors:#897048 #917953 #a18a66 #b6a488 #c5b59b #d4c5ae #e2d6c4 #eae1d2;  padding: 5px 5px 5px 15px;  width: 300px;  }

容器的阴影

目前来说给一个元素添加阴影是相当苦难能的。

但在CSS中：

.border_shadow {  -webkit-box-shadow: 10px 10px 5px #888;  padding: 5px 5px 5px 15px;  width: 300px;  }

边框图片

边框图片是最有用的新增功能之一，我真的对人们将如何使用这个功能而感到好奇。CSS将有能你为你重复、伸展你选择的边框图片。

CSS代码会和下面的这些类似（目前这些代码根据不同的浏览器将有所不同）：

.border_image {  -webkit-border-image: url(border.png) 27 27 27 27 round round;  }

CSS模块——字体

字体无疑是设计排版时的一个重要方面。文字能引导读者穿越整个页面，留下某种印象，产生冲击力，或者其他一些微妙的效果。
CSS目前已经在文字显示方面具备很多功能，但还是在某些方面限制了设计。CSS3正朝着减少这些限制的方向而努力。

文字阴影

字体阴影听起来并不是那么好，但这要看你怎么运用它。当我在为这篇文章做测试的时候，我发现有一些组合看起来很具有吸引力。阴影用在标题上是很不错的。Matthias Kretschmann的BLOG上面有一些很好的例子。

.text_shadow {  color: #897048;  background-color: #fff;  text-shadow: 2px 2px 2px #ddccb5;  font-size: 15px;  }  

文字换行

目前，如果一个词太长以至于一行都装不下，它就会跨越边界，造成溢出。这个现象不是很常见，但偶尔也能遇到。新的文字换行功能将会强迫文字去换行，即使这会造成词语分裂。

实现这个的代码是很简单的：

.text_wrap {  word-wrap:  break-word;  }  

在线字体

虽然这个严格地说不算是“字体效果”，但我们还是打算包含这一条。在线字体的使用能让浏览器自动的下载你指定的字体。这个改变对于网页设计将是革命性的，因为之前的设计都仅限于10到15种被广泛支持的字体。但是，这个新功能有可能造成一些版权的争议。

目前Safari的最新版本（3.1）是唯一支持在线字体的浏览器。Opera马上也会支持这个功能，其他的浏览器也会马上跟进。下面是实现这个功能的代码：

@font-face {  font-family: 'Name of the new font';  src: url('http://www.designshack.co.uk/fonts/font.ttf');  }  

目前已经有一些页面使用了这个功能。下面的例子就是CSS Zen Garden里面的页面，其作者是A List Apart。当然这个页面只能在某些浏览器里面正常显示：

CSS模块——用户界面

CSS3增加了很多关于用户界面方面的新属性，例如元素的尺寸伸缩、光标手势、轮廓(Outlining)、盒状布局(Box Layout)等等。我们将关注其中三个最重要的增强属性。

缩放

最新版的Safari是能够允许元素的缩放的。CSS3允许你将这个属性应用到任意元素，这将使缩放这个功能拥有跨浏览器的支持。

实现代码如下：

.ui_resizable {  padding: 20px;  border: 1px solid;  resize: both;  overflow: auto;  }

盒尺寸(Box Sizing)

关于CSS3的盒模型已经是属于本文的扩展领域了，完整的信息你可以到官方站点找到。就单独盒尺寸这个方面来说，它能够让你定义元素以何种方式填充一个容器。举例来说，如果你想将两个有边框的盒子（译者注：即通常概念下按照盒模型计算的容器）毗邻的紧紧的卡在另一个容器内，你就可以通过设置”box-sizing”为”border-box”。这个值将强迫浏览器把padding和border的宽度放在盒子的内部（译者注：即不会向外”扩张“了）。

目前，可能需要使用一些私有属性才能让所有浏览器都支持这个功能。这里给出一个很基本的例子：

.area {/* 放置这两个盒子的容器  */  width: 300px;  border: 10px solid #ddccb5;  height: 60px;  }  .boxes {/* 应用属性的盒子 */  box-sizing: border-box;  width:50%;  height: 60px;  text-align: center;  border: 5px solid #897048;  padding: 2px;  float:left;  }

轮廓

在CSS2里面我们已经能通过设置border属性给一个元素设置轮廓边框了，但是在CSS3我们可以通过设置一个数值而更方便地设置边框的偏移。同时，它和border属性有两点不同：

• 轮廓是不占用控件的
• 轮廓不一定是矩形的

你可以通过如下代码创建：

.ui_outline {  width: 150px;  padding: 10px;  height: 70px;  border: 2px solid black;  outline: 2px solid #897048;  outline-offset: 15px;  }