5个CSS3技术实现设计增强（2）

猫性男孩

3.文字阴影

目前支持的浏览器:Apple Safari 3+, Firefox 3.0.5+, Google Chrome 1+

为文本添加阴影效果，控制阴影左/右和上/下的偏移，还可以设置阴影的颜色。

1	text-shadow : x y blur color ;

你可以结合透明颜色值来设置文字阴影的明暗:

1	text-shadow : -2px 2px 10px rgba ( , , ,.5 ) ;

你还可以让文字有多个阴影，每个阴影属性使用逗号分隔:

1 2	text-shadow : 10px rgba ( , 255 , ,.5 ) , -10px 5px 4px rgba ( , , 255 ,.45 ) , 15px -4px 3px rgba ( 255 , , ,.75 ) ;

4.盒阴影

目前支持的浏览器:Apple Safari 4+, Firefox 3+, Google Chrome 1+

为某个和元素添加阴影的CSS3属性声明格式与文本阴影相同:

1	box-shadow : x y blur color ;

和文本阴影一样，Mozilla 和 Webkit 也有他们自己的盒阴影规则:

1 2 3

-webkit-box-shadow : 10px rgb ( , , ) ; -moz-box-shadow : 10px rgb ( , , ) ; box-shadow : 10px rgb ( , , ) ;

你也可以为某个盒元素添加多个阴影，仍然是使用逗号分隔。

1 2 3 4 5 6

-webkit-box-shadow : 20px rgb ( , 255 , ) , -10px 5px 4px rgba ( , , 255 ,.45 ) , 15px -20px 20px rgba ( 255 , , ,.75 ) ; -moz-box-shadow : 20px rgb ( , 255 , ) , -10px 5px 4px rgba ( , , 255 ,.45 ) , 15px -20px 20px rgba ( 255 , , ,.75 ) ; box-shadow : 20px rgb ( , 255 , ) , -10px 5px 4px rgba ( , , 255 ,.45 ) , 15px -20px 20px rgba ( 255 , , ,.75 ) ;

5.多背景图

目前支持的浏览器:Apple Safari 1.3+, Google Chrome 1+

为某个单一元素添加多个背景图的话仅需要为不同的背景图声明之间添加都好来分隔开。当然，你还要为其它浏览器准备一张完整的图片。

1 2 3 4 5

background-image : url (astro- 127531.png ) ; background-image : url (astro- 127531.png ) , url (Hubble- 112993.png ) ; background-repeat : no-repeat ; background-position : bottom left ; background-position : bottom left , top right ;

“买五送一”-旋转任何元素

目前支持的浏览器:Apple Safari 4+, Firefox 3.5+, Google Chrome 1+

虽然它目前不算是CSS3中的一部分，但Webkit已经有了它自己的一套变形属性，Mozilla也在效仿。变形包含了很多不同类型的值，不过其中最有意思也是最有用的就是旋转了。

1 2	webkit-transform : rotate (-15deg ) ; -moz-transform : rotate (-15deg ) ;

下图为不支持CSS3的浏览器所呈现出来的样子(如Opera 9):

查看实例Demo(需要使用Safari 4+, Firefox 3.5+, or Chrome 1+浏览器)

原文链接：http://www.cnblogs.com/hnyei/archive/2011/09/22/2184990.html