5个CSS3技术 实现设计增强

虽然目前有许多的CSS的新特性都还没有得到官方的认可，但很多浏览器（不包括IE）已经开始实现CSS3的规范。

在使用这些CSS3的新功能时，最关键的是要将它们作为设计增强。顾名思义，设计增强也就是在不影响可用性的情况下加强视觉吸引效果。

以下将会列举5个不同的CSS3 属性：

这是在没有应用CSS3效果之前的原始图片

1.透明颜色

目前支持的浏览器：Apple Safari 4， Firefox 3.0.5+， Google Chrome 1+

RGBA允许你控制某个特性填充颜色的不透明度，无论是文本、背景、边框还是背景颜色。

设置颜色透明度的时候，你需要使用RGB颜色值，不可以再使用十六进制值，而那个”A”则代表透明度，你可以设置从0（透明）到1（不透明）之间的数值。

1 rgba（0-255，0-255，0-255，0-1）

你还可以单独使用RGB值：

1.topbox {

2 color： rgb（235，235，235）;

3 color： rgba（255，255，255，0.75）;

4 background-color： rgb（153，153，153）;

5 background-color： rgba（0，0，0，0.5）;

6 border-color： rgb（235，235，235）;

7 border-color： rgba（255，255，255，0.65）;

8 }

有个好消息就是至少你可以使用CSS滤镜单独针对IE浏览器设置背景颜色。

注：由于Wordpress不能显示以上代码，所以将其弄成图片，所以你需要自行写以上代码了哦。

2.圆角

目前支持的浏览器：Apple Safari 3+， Firefox 1+， Google Chrome 1+

边框半径用于设置和模型每个角的曲率，仿佛有一对与特定的角落虚圆半径（r）：

1 border-radius： r;

虽然border-radius是未来CSS3的一部分，不过现在无论Mozilla（Firefox）和Webkit（Safari和Chrome）都已经有了自己的圆角版本。

1-webkit-border-radius： 10px;

2-moz-border-radius： 10px;

3 border-radius： 10px;

你也可以单独设置某个角的半径：

CSS3	Mozilla	WebKit
border-top-right-radius	-moz-border-radius-topright	-webkit-border-top-right-radius
border-bottom-right-radius	-moz-border-radius-bottomright	-webkit-border-bottom-right-radius
border-bottom-left-radius	-moz-border-radius-bottomleft	-webkit-border-bottom-left-radius
border-top-left-radius	-moz-border-radius-topleft	-webkit-border-top-left-radius
border-radius	-moz-border-radius	-webkit-border-radius

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（0，0，0，.5）;

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

1 text-shadow： 0 0 10px rgba（0，255，0，.5）， -10px 5px 4px rgba（0，0，255，.45），

2 15px -4px 3px rgba（255，0，0，.75）;

4.盒阴影

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

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

1 box-shadow： x y blur color;

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

1-webkit-box-shadow： 0 0 10px rgb（0，0，0）;

2-moz-box-shadow： 0 0 10px rgb（0，0，0）;

3 box-shadow： 0 0 10px rgb（0，0，0）;

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

1-webkit-box-shadow： 0 0 20px rgb（0，255，0）， -10px 5px 4px rgba（0，0，255，.45），

 2 15px -20px 20px rgba（255，0，0，.75）;

3-moz-box-shadow： 0 0 20px rgb（0，255，0）， -10px 5px 4px rgba（0，0，255，.45），

4 15px -20px 20px rgba（255，0，0，.75）;

5 box-shadow： 0 0 20px rgb（0，255，0）， -10px 5px 4px rgba（0，0，255，.45），

6  15px -20px 20px rgba（255，0，0，.75）;

5.多背景图

目前支持的浏览器：Apple Safari 1.3+， Google Chrome 1+

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

1 background-image： url（astro-127531.png）;

2 background-image： url（astro-127531.png），url（Hubble-112993.png）;

3 background-repeat： no-repeat;

4 background-position： bottom left;

5 background-position： bottom left， top right;

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

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

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

1-webkit-transform： rotate（-15deg）;

2-moz-transform： rotate（-15deg）;

下图为不支持CSS3的浏览器所呈现出来的样子（如Opera 9）：

查看实例Demo（需要使用Safari 4+， Firefox 3.5+， or Chrome 1+浏览器）

原文地址：http://www.javaeye.com/news/10044