CSS 3入门（2）

边框

    在CCS 3中边框也有了不同凡响的新功能，比如可以支持层次化等。在Firefox中运行下面的代码：

#box {   
 border: 8px solid #000;   
 -moz-border-bottom-colors: #033 #039 #777 #888 #999 #aaa #bbb #ccc;   
 -moz-border-top-colors:    #033 #039 #777 #888 #999 #aaa #bbb #ccc;   
 -moz-border-left-colors:   #033 #039 #777 #888 #999 #aaa #bbb #ccc;   
 -moz-border-right-colors:  #033 #039 #777 #888 #999 #aaa #bbb #ccc;   
 width:400px;   
}

  你将会看到如下效果：  

如果你没有使用Firefox 3，下面是演示截图：

本文在写作的时候，Safari和Opera还都不支持上面的语法。

阴影

尽管这已经不是一项新技术，但是现在给文字添加阴影已经十分方便了。早在CSS 2.1中就已经这个规则了，而Safari从它的1.0版本开始就已经开始支持了。可以简单地使用text-shadow属性：

<p style="text-shadow: 2px 2px 2px #000;">My Text</p> 
前两个数值，向下2px和向右2px用来控制边距，最后一个数值用来控制阴影的扩展程度。如果你想使阴影出现在文字的上方，只需要把对应的数值设置成负数。下面是一个示例：

If you have Safari 3, Opera 9.5, Firefox 3.1a, Konqueror or iCab this paragraph should have a gray drop-shadow.

Safari中的截图：

    在一些浏览器（特别是在Opera和Firefox 3.1a）中甚至还可以支持多重阴影，这就意味着你可以只用CSS制作与Photoshop中别无二致的复杂效果来。 

图片特效

    这个功能可以让你的设计跃然纸上。不过，目前为止只有WebKit系浏览器支持遮罩效果，但是Firefox和Opera很快也会支持了。这项功能主要是为图片、视频以及其它元素添加透明的遮罩效果。
在Safari中其规则如下：

-webkit-mask (background)   
-webkit-mask-attachment (background-attachment)   
-webkit-mask-clip (background-clip)   
-webkit-mask-origin (background-origin)   
-webkit-mask-image (background-image)   
-webkit-mask-repeat (background-repeat)   
-webkit-mask-composite (background-composite)   
-webkit-mask-box-image (border-image)  

你可以在 David Hyatt's (Safari的开发者)的文章中查看更炫的遮罩效果。 

其它

    随着浏览器对CSS支持的扩大更多更新的显示效果会相继出现。实际上，本文仅仅掀开了CSS 3的神秘面纱。CSS 3中还支持多个背景图片、HSL色彩、盒模型缩放、单元素的多栏布局等等。

     除上述属性为，CCS 3还增加了更强大的新的选择器的把持，这就使得现在需要五六行才能的实现的效果在一行CCS 3代码就可以搞定。Roger Johansson在456 Berea St有一篇对CSS 3选择器的详细解释（本人已经将此文翻译成了中文：《详解CSS 3中的属性选择符》）。