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

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

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

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

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

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

支持的瀏覽器：蘋(píng)果Safari 4，F(xiàn)irefox 3，谷歌瀏覽器1

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

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

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

<跨度風(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）；

你可以通過(guò)包括多個(gè)值用空格分隔添加多個(gè)陰影：

-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。多重背景

支持的瀏覽器：蘋(píng)果Safari 1.3，谷歌瀏覽器1

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

<跨度風(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；”>背景位置：左下

特別獎(jiǎng)金

旋轉(zhuǎn)的東西！

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

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

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

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