3.5  接触未来（二）—CSS 3的世界很精彩

层叠样式表（Cascading Style Sheets，CSS）的出现已经有13年时间了，目前已被广泛使用的CSS 2.1标准的出现也有11年了，CSS 2.1 在浏览器兼容性上也产生了针对浏览器解析CSS Bug的Hack技术，现在是时候引入CSS 3了。不要害怕兼容性，也不要害怕你的设计，让客户知道引入CSS 3的好处，让旧的浏览器消失，现代浏览器具有更丰富的功能，你要为兼容性的设计付出更高的成本来进行调试。接下来，我们看看CSS 3的优势和其在开发中使用的一些例子，看看使用CSS 3的一些新功能是否也能像使用HTML 5一样让我们的工作变得简单。

首先，回想一下在CSS 2中要完成几项样式时需要什么样的结构及样式表。

1．圆角

你的网站是Web 2.0的吗？那没圆角怎么行？这是在Web 2.0类网站当中经常出现的一种简单视觉判别。当然，是否是Web 2.0并不是由有没有使用圆角或渐变图案来界定的，但它的使用非常广泛，在各种CSS设计书中也会提到圆角的设计技巧。有些圆角设计基本背离了HTML是 一门结构语言的本意，增加了无关紧要的标记来完成圆角这个非常基本的样式。下面的例子使用了纯CSS来实现圆角，见代码清单3-9。

代码清单3-9  圆角的代码

 
  
  1. <div class=”windows”> 
  2. <b class=”xtop”> 
  3. <b class="xb1"/> 
  4. <b class="xb2"/> 
  5. <b class="xb3"/> 
  6. <b class="xb4"/> 
  7. </b> 
  8. <div id=”xcontent”> 
  9. <h2>框标题</h2> 
  10. <p>这是一个带圆角的框</p> 
  11. </div> 
  12. <b class=”xbottom”> 
  13. <b class="xb4"/> 
  14. <b class="xb3"/> 
  15. <b class="xb2"/> 
  16. <b class="xb1"/> 
  17. </b> 
  18. </div> 
 
  
相应的CSS见代码清单3-10。
 
  
代码清单3-10  圆角实现的CSS代码
 
  
 
  
  1. .xtop, .xbottom{  
  2. font-size:1px;  
  3. display:block;  
  4. }  
  5. .xb1 {  
  6. background:#0088CC none repeat scroll 0 0;  
  7. margin:0 5px;  
  8. }  
  9. .xb1, .xb2, .xb3 {  
  10. height:1px;  
  11. }  
  12. .xb1, .xb2, .xb3, .xb4 {  
  13. display:block;  
  14. overflow:hidden;  
  15. }  
  16. .xcontent{  
  17. border-color:#0088CC;  
  18. border-style:solid;  
  19. border-width:0 1px;  
  20. display:block;  
  21. }  
  22. .windows h2{  
  23. font-size:2.5em;  
  24. } 
 
  
上面的代码复杂吗？其实也不会很复杂，要实现圆角还有很多种方式，有的还应用到了JavaScript。但作为标准的网站，这样的结构不能满足开发 规范，设计师往往会感到无奈。CSS 3中实现圆角的操作复杂吗？只需要对某一元素加上border-radius即可。这样就行了吗？
 
  
其实还有一点让人讨厌的地方，CSS 3目前也还是草案，所以各浏览器在支持上也有各自的扩展，并不统一，需要加上对不同内核浏览器的定义：基于WebKit的（如Safari、 Chrome）加上-webkit-border-radius；基于Gecko的（如Firefox）加上-moz-border-radius。浏览 器扩展使用“-”或“_”开头，后面带上属性名称即可，但在正式发布标准时，还是应该避免使用这样的扩展。圆角的例子中如果有需要，还要对4个圆角进行控 制，即左上角topleft、右上角topright、左下角bottomleft和右下角bottomright。完整代码见代码清单3-11。
 
  
代码清单3-11  各种不同的实现
 
  
 
  
  1. /* Gecko 内核 */  
  2. -moz-border-radius-topleft：20px;  
  3. -moz-border-radius-topright：0;  
  4. -moz-border-radius-bottomleft：0;  
  5. -moz-border-radius-bottomright：20px;  
  6. /* Webkit 内核 */  
  7. -webkit-border-topp-left-radius：20px;  
  8. -webkit-border-top-right-radius：0;  
  9. -webkit-border-bottom-left-radius:0;  
  10. -webkit-border-bottom-right-radius：20px;  
  11. /* W3C 语法 */  
  12. border-top-left-radius：20px;  
  13. border-top-right-radius：0;  
  14. border-bottom-right-radius：0;  
  15. border-bottom-left-radius： 20px; 
 
  
2．阴影
 
  
CSS阴影效果在CSS 2时就已经出现了，只是当时只有Safari一种浏览器支持，所以要实现阴影效果一般是采用图片来替代。CSS 3中的阴影可以用在边框及文字上，写法如下：
 
  
边框阴影：box-shadow x轴 y轴 阴影长度 着色
 
  
文字阴影：text- shadow x轴 y轴 阴影长度 着色
 
  
在目前的草案实现上，需要加上各浏览器内核前缀，简单的例子如下：
 
  
 
  
  1. .textShadow：{  
  2. font-size:：46px;  
  3. color：#A30B0B ：  
  4. text-shadow:0 0 15px #C7C7C7;  
  5. font-weight: bold;  
  6. } 
 
  
效果见图3-25。
 
  
 
（点击查看大图）图3-25  CSS 3的阴影效果
 
  
以上仅举了两个例子说明目前CSS 2与CSS 3的本质区别。CSS 3将工作简单化了，之前需要很多种技巧实现的效果，现在可以直接以样式表属性进行表现。从CSS 3的整个技术概览上看，总共分为4类变化：选择器、布局、样式、动画。下文将一一介绍。
 
  
 
 
  
书籍：大巧不工：Web前端设计修炼之道