雖然目前有許多的CSS的新特性都還沒有得到官方的認可，但很多瀏覽器已經開始實現CSS3的規范。

在使用這些CSS3的新功能時，最關鍵的是要將它們作為設計增強。顧名思義，設計增強也就是在不影響可用性的情況下加強視覺吸引效果。

以下將會列舉5個不同的CSS3 屬性：

這是在沒有應用CSS3效果之前的原始圖片

1.透明顏色

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

RGBA允許你控制某個特性填充顏色的不透明度，無論是文本、背景、邊框還是背景顏色。

設置顏色透明度的時候，你需要使用RGB顏色值，不可以再使用十六進制值，而那個”A”則代表透明度，你可以設置從0到1之間的數值。

1 rgba

你還可以單獨使用RGB值：

1.topbox {

2 color： rgb;

3 color： rgba;

4 background-color： rgb;

5 background-color： rgba;

6 border-color： rgb;

7 border-color： rgba;

8 }

有個好消息就是至少你可以使用CSS濾鏡單獨針對IE瀏覽器設置背景顏色。

注：由于Wordpress不能顯示以上代碼，所以將其弄成圖片，所以你需要自行寫以上代碼了哦。

2.圓角

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

邊框半徑用于設置和模型每個角的曲率，仿佛有一對與特定的角落虛圓半徑：

1 border-radius： r;

雖然border-radius是未來CSS3的一部分，不過現在無論Mozilla和Webkit都已經有了自己的圓角版本。

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;

你還可以讓文字有多個陰影，每個陰影屬性使用逗號分隔：

1 text-shadow： 0 0 10px rgba， -10px 5px 4px rgba，

2 15px -4px 3px rgba;

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;

2-moz-box-shadow： 0 0 10px rgb;

3 box-shadow： 0 0 10px rgb;

你也可以為某個盒元素添加多個陰影，仍然是使用逗號分隔。

1-webkit-box-shadow： 0 0 20px rgb， -10px 5px 4px rgba，

 2 15px -20px 20px rgba;

3-moz-box-shadow： 0 0 20px rgb， -10px 5px 4px rgba，

4 15px -20px 20px rgba;

5 box-shadow： 0 0 20px rgb， -10px 5px 4px rgba，

6  15px -20px 20px rgba;

5.多背景圖

目前支持的瀏覽器：Apple Safari 1.3+， Google Chrome 1+

為某個單一元素添加多個背景圖的話僅需要為不同的背景圖聲明之間添加都好來分隔開。當然，你還要為其它瀏覽器準備一張完整的圖片。

1 background-image： url;

2 background-image： url，url;

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;

2-moz-transform： rotate;

下圖為不支持CSS3的瀏覽器所呈現出來的樣子：

查看實例Demo

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