CSS3設(shè)計功能5個可以利用

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

要使用這些新的CSS3的特點是把他們當(dāng)作設(shè)計改進(jìn)。
一個設(shè)計增強(qiáng)（我討論我的新書演講風(fēng)格：網(wǎng)頁設(shè)計師的CSS的基礎(chǔ)）任何繁榮您添加到您的網(wǎng)站設(shè)計，增加視覺吸引力，而不降低其可用性如果樣式不呈現(xiàn)。

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

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

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

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

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

就像文字陰影，Mozilla和WebKit在最終的CSS標(biāo)準(zhǔn)提前實施自己的詞匯：

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

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

 < /跨度> <跨度風(fēng)格=“顏色：# 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

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

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

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

 < /跨度> <跨度風(fēng)格=“顏色：# 008000；”>背景重復(fù)：不重復(fù)；

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

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

特別獎金

旋轉(zhuǎn)的東西！

支持的瀏覽器：蘋果Safari 4，F(xiàn)irefox 3.5，鉻1

雖然不是一個部分的CSS3規(guī)范然而，WebKit已實現(xiàn)其自身的變換特性，Mozilla是繼服。變換可以包括不同的價值類型，但其中最有趣和有用的設(shè)計增強(qiáng)-旋轉(zhuǎn)：

<跨度風(fēng)格=“顏色：# 008000；”>的WebKit的變換：旋轉(zhuǎn)（- 15）；

 < /跨度> <跨度風(fēng)格=“顏色：# 008000；”> -moz變換：旋轉(zhuǎn)（- 15）；