CSS3設計功能5個可以利用

層疊樣式表（CSS）是網頁設計的語言，和下一代的CSS設計性能都迫不及待地想被釋放。
你想開始使用他們，但不知道從哪里開始呢？
雖然許多新的特性，沒有“官方”，一些瀏覽器已經實現了許多功能的CSS 3級規格。
問題是，許多瀏覽器特別是Internet Explorer沒有。

要使用這些新的CSS3的特點是把他們當作設計改進。
一個設計增強（我討論我的新書演講風格：網頁設計師的CSS的基礎）任何繁榮您添加到您的網站設計，增加視覺吸引力，而不降低其可用性如果樣式不呈現。

這可以是一個棘手的電話，有一個一線之間增強而不是減少可用性：
•設計增強的例子：使用邊界半徑圓盒子的角落，創造一個更吸引人的設計。然而，如果角不呈現，網站還在使用。
•設計實例減少可用性：使用RGBA顏色值在背景重疊的元素，都需要清晰可見，期待上元素是半透明的。這將使它不可能為一些人使用該網站，從而減少頁面的可用性。
讓我們來看看5種不同的CSS3屬性，你可以開始玩吧，只要你永遠記住，他們只應被用來提高你的設計，而不依賴于網站的可用性。
這是原來的設計，在使用任何CSS3設計改進

1。透明的顏色
支持的瀏覽器：蘋果Safari 4，Firefox 3.0.5，谷歌瀏覽器1
RGBA允許你控制一個特定的顏色填充不透明度，無論是文字、背景、邊框、陰影顏色。
設置顏色的透明度要求您指定的顏色值用RGB表示十六進制值是不允許一個額外的值從0（透明）到1（不透明）。
<跨度風格=“顏色：# 008000；”> RGBA（0-255,0-255,0-255,0-1）  class=“spacer_”/>
你也應該有一個簡單的RGB顏色值，或六作為其他瀏覽器使用回退：
<跨度風格=“顏色：# 008000；“>。爆破{ 
 
 < /跨度> <跨度風格=“顏色：# 008000；“>顏色：RGB（235235235）；
 
 < /跨度> <跨度風格=“顏色：# 008000；“>顏色：RGBA（255255255,0.75）；
 
 < /跨度> <跨度風格=“顏色：# 008000；”>背景顏色：RGB（153153153）；
 
 < /跨度> <跨度風格=“顏色：# 008000；”>背景顏色：RGBA（0,0,0,0.5）；
 
 < /跨度> <跨度風格=“顏色：# 008000；”>邊框顏色：RGB（235235235）；
 
 < /跨度> <跨度風格=“顏色：# 008000；”>邊框顏色：RGBA（255255255,0.65）；
 
 < /跨度> <跨度風格=“
好消息是，還有一個后備方案至少在Internet Explorer的背景顏色，支持透明的顏色使用過濾器和條件格式：

2。圓角
支持的瀏覽器：蘋果Safari 3，Firefox 1，谷歌瀏覽器1
邊界半徑套盒子的每一角落的曲率，好像有一個假想的圓的角落與一個特定的半徑（R）：
<跨度風格=“顏色：# 008000；”>邊界半徑R；
雖然邊界半徑將是未來CSS3規范的一部分，無論是Mozilla（Firefox）和Webkit（Safari和Chrome）推出了自己的版本必須包含最大的跨瀏覽器兼容性：
<跨度風格=“顏色：# 008000；”>的WebKit的邊界半徑：10px；
 
  <跨度風格=“顏色：# 008000；”> -moz邊界半徑：10px；
 
  <跨度風格=“顏色：# 008000；”>邊界半徑：10px；
你也可以設置半徑為角單獨：
CSS3    Mozilla    WebKit
邊境—右上角半徑    -moz邊境—半徑右上    WebKit的邊界—右上角半徑
邊境—右下角的半徑    -moz邊境—半徑下    WebKit的邊界—右下角的半徑
邊境—左下角的半徑    -moz邊境—bottomleft半徑    WebKit的邊界—左下角的半徑
邊境—左上角的半徑    -moz邊境—半徑上    WebKit的邊界—左上角的半徑
邊境—半徑    -moz邊境—半徑    WebKit的邊界—半徑
 
 
3。文字陰影
支持的瀏覽器：蘋果Safari 3，Firefox 3.0.5，谷歌瀏覽器1
在任何文本添加陰影，控制左右或上下偏移，以及顏色：
<跨度風格=“顏色：# 008000；”>文本陰影：X Y模糊顏色；
你可以文字陰影透明色來控制陰影的黑暗結合：
<跨度風格=“顏色：# 008000；”>文本陰影：- 2px 2px 10px RGBA（0,0,0，。5）；< /跨度>
您還可以包括多個文本陰影只是重復值用逗號隔開：
<跨度風格=“顏色：# 008000；”>文本陰影：< /跨度> <跨度風格=“顏色：# 008000；”> 0 0 10px RGBA（0255,0，。5），- 10px 5px 4px的RGBA（0,0255，45），< > <跨跨越式=“顏色008000：#；”> 
 
 15px - 4PX 3px RGBA（255,0,0，。75）；< /跨度>

4。陰影框

支持的瀏覽器：蘋果Safari 4，Firefox 3，谷歌瀏覽器1

任何框添加投影屏幕上遵循相同的格式，添加一個文本陰影：

<跨度風格=“顏色：# 008000；”>盒陰影：X Y模糊顏色；

就像文字陰影，Mozilla和WebKit在最終的CSS標準提前實施自己的詞匯：

<跨度風格=“顏色：# 008000；”> - WebKit盒陰影：0 0像素RGB（0,0,0）；

 < /跨度> <跨度風格=“顏色：# 008000；”> -moz盒陰影：0 0像素RGB（0,0,0）；

 < /跨度> <跨度風格=“顏色：# 008000；”>盒陰影：0 0像素RGB（0,0,0）；

你可以通過包括多個值用空格分隔添加多個陰影：

-webkit-box-shadow: 0 0 20px rgb(0,255,0), -10px 5px 4px rgba(0,0,255,.45), 

15px -20px 20px rgba(255,0,0,.75);

-moz-box-shadow: 0 0 20px rgb(0,255,0), -10px 5px 4px rgba(0,0,255,.45),

15px -20px 20px rgba(255,0,0,.75);

box-shadow: 0 0 20px rgb(0,255,0), -10px 5px 4px rgba(0,0,255,.45),

15px -20px 20px rgba(255,0,0,.75);

5。多重背景

支持的瀏覽器：蘋果Safari 1.3，谷歌瀏覽器1

包括在一個單一的元素多背景圖片只需要額外的設置值被添加到背景屬性，用逗號隔開。你應該有一個背景圖像作為其他瀏覽器的備份：

<跨度風格=“顏色：# 008000；”>背景圖像：URL（astro-127531。PNG）；

 < /跨度> <跨度風格=“顏色：# 008000；”>背景圖像：URL（astro-127531。PNG），URL（hubble-112993。PNG）；

 < /跨度> <跨度風格=“顏色：# 008000；”>背景重復：不重復；

 < /跨度> <跨度風格=“顏色：# 008000；”>背景位置：左下；

 < /跨度> <跨度風格=“顏色：# 008000；”>背景位置：左下

特別獎金

旋轉的東西！

支持的瀏覽器：蘋果Safari 4，Firefox 3.5，鉻1

雖然不是一個部分的CSS3規范然而，WebKit已實現其自身的變換特性，Mozilla是繼服。變換可以包括不同的價值類型，但其中最有趣和有用的設計增強-旋轉：

<跨度風格=“顏色：# 008000；”>的WebKit的變換：旋轉（- 15）；

 < /跨度> <跨度風格=“顏色：# 008000；”> -moz變換：旋轉（- 15）；