1、06. 幾個(gè)CSS3高級(jí)特性,內(nèi)容,使用 CSS3 制作文字陰影 使用 CSS3 制作盒陰影（即元素投影） 使用 CSS3 制作漸變背景 使用 CSS3 的多重背景圖片 使用 CSS3 背景漸變來(lái)制作圖案 使用 CSS3 的font-face 規(guī)則來(lái)制作節(jié)省帶寬的圖標(biāo),文字陰影,文字陰影的基本語(yǔ)法： .element text-shadow: 1px 1px 1px #cccccc; 第一個(gè)值指的是右側(cè)陰影的大小，第二個(gè)值指的是下方陰影的大小，第三個(gè)值指的是模糊距離（即陰影從開(kāi)始變淡到完全消失的距離），最后一個(gè)值是陰影顏色。 陰影顏色也可以是HSL(A)或RGB(A)： text-shadow

2、: 4px 4px 0px hsla(140, 3%, 26%, 0.4);,如何定義顏色,考慮到瀏覽器兼容性，在使用HSLA 或RGBA 陰影時(shí)我一般都這樣做： text-shadow: 4px 4px 0px #404442; text-shadow: 4px 4px 0px hsla(140, 3%, 26%, 0.4); 即先定義一個(gè)使用十六進(jìn)制顏色的陰影（作為針對(duì)老版本瀏覽器的備用方案），然后再定義一個(gè)使用HSLA 或RGBA 顏色的陰影。 其他使用顏色的地方都可以這樣處理。,陰影值也可以使用 em 或rem 單位 如：文字的大小是102 像素，文字陰影大小是4 像素。使用公式： 目

3、標(biāo)元素尺寸上下文元素尺寸=百分比尺寸 來(lái)計(jì)算一下（4102=.039215686），結(jié)果如下： text-shadow: .039215686em .039215686em 0em #dad7d7; /* 4 102 */ 陰影一般都比較小，一個(gè)或兩個(gè)像素的陰影，在所有視口中的效果都很不錯(cuò)。所以就用px單位也行。,如果要在一大段陰影文字中取消一部分文字的陰影，可使用： text-shadow: none; 使用負(fù)值可以制作出左上方陰影效果，例如： text-shadow: -4px -4px 0px #dad7d7; 如果不需要陰影模糊效果，可以將text-shadow 的第三個(gè)值（模糊半徑）

4、從聲明中刪除： text-shadow: -4px -4px #dad7d7; 這種簡(jiǎn)寫(xiě)假定第三個(gè)值沒(méi)有聲明，而前兩個(gè)值表示陰影偏移距離。,text-shadow特效,浮雕文字陰影效果 text-shadow: 0 1px 0 hsla(0, 0%, 100%, 0.75); 多重文字陰影 只需將兩組值使用逗號(hào)分隔開(kāi)即可，比如： text-shadow: 0px 1px #ffffff,4px 4px 0px #dad7d7;,盒陰影,語(yǔ)法很簡(jiǎn)單： box-shadow: 0px 3px 5px #444444; 但是，盒陰影的的跨瀏覽器支持并不好，所以明智的做法是使用瀏覽器私有前綴，例如：

5、-ms-box-shadow: 0px 3px 5px #444444; -moz-box-shadow: 0px 3px 5px #444444; -webkit-box-shadow: 0px 3px 5px #444444; box-shadow: 0px 3px 5px #444444;,.sideBlock img max-width: 45%; box-shadow: 0px 3px 5px #444444; 圖片加上了box-shadow效果：,box-shadow特效,內(nèi)陰影出現(xiàn)在元素內(nèi)部，而不是外部。內(nèi)陰影可用來(lái)制作光暈效果，如下所示： box-shadow:inset 0

6、0 40px #000000; 例如：，為整個(gè)頁(yè)面添加光暈效果，這樣就會(huì)讓頁(yè)面的四周都出現(xiàn)陰影。 body -moz-box-shadow:inset 0 0 30px #000000; -webkit-box-shadow:inset 0 0 30px #000000; box-shadow:inset 0 0 30px #000000; 多重陰影： box-shadow: inset 0 0 30px hsl(0, 0%, 0%), inset 0 0 70px hsla(0, 97%, 53%, 1);,線性漸變,用純CSS3就可以做出漸變，而且不用圖片，代碼如下： background

7、: linear-gradient(90deg, #ffffff 0%, #e4e4e4 50%, #ffffff 100%); 四個(gè)參數(shù)的含義如下： 第一個(gè)值定義了漸變的方向。不定義該值則默認(rèn)是一個(gè)垂直從頂部到底部的漸變。你還可以使用如to top right 這樣的值，這會(huì)產(chǎn)生一個(gè)朝向右上角的對(duì)角線漸變。 下一個(gè)值定義的是漸變的“起點(diǎn)”，包括起點(diǎn)的顏色和位置。你也可以使用像blue 20%這樣的值，這樣就是從藍(lán)色開(kāi)始漸變到下一個(gè)顏色，而漸變開(kāi)始位置則位于假想的漸變路徑的20%處。同樣，起點(diǎn)位置也可以使用負(fù)值，這樣漸變從實(shí)際可見(jiàn)區(qū)域之外就開(kāi)始了。 下一個(gè)值指的是“過(guò)渡顏色點(diǎn)”。我們來(lái)回顧一下

8、：沿著90 度垂直方向，從白色開(kāi)始（(#ffffff 0%），向位于漸變路徑50%處的#e4e4e4 這個(gè)顏色（淺灰色）漸變。這里就是漸變中的第一個(gè)過(guò)渡顏色點(diǎn)。如果需要的話，可以在漸變“終點(diǎn)”之前定義更多的過(guò)渡顏色點(diǎn)（使用逗號(hào)分隔）。 圓括號(hào)中的最后一個(gè)值始終是漸變的“終點(diǎn)”。不論在起點(diǎn)之后放置了多少個(gè)過(guò)渡顏色點(diǎn)，最后一個(gè)值始終是終點(diǎn)。,徑向背景漸變,徑向漸變是從一個(gè)中心點(diǎn)開(kāi)始，依據(jù)橢圓形或圓形進(jìn)行擴(kuò)張漸變。 徑向背景漸變的語(yǔ)法如下所示： background: radial-gradient(center, ellipse cover, #ffffff 72%, #dddddd 100%);

9、 在圓括號(hào)中設(shè)定起點(diǎn)。center表示中心，也可以使用如25px 25px 這樣的值，這就表示從距元素上邊和左邊均為25 像素的那個(gè)點(diǎn)開(kāi)始漸變。 下一個(gè)值更簡(jiǎn)單，它指的是徑向漸變的形狀和大小。（稍后詳述） 接下來(lái)是定義漸變起點(diǎn)、過(guò)渡點(diǎn)以及終點(diǎn)的顏色和位置（這部分和線性漸變是一樣的）。,徑向漸變的形狀和大?。?形狀：circle或ellipse 大?。?closest-side：（漸變形狀是圓形時(shí)）以距離中心點(diǎn)最近的一邊為漸變半徑，或者（漸變形狀是橢圓形時(shí)）以距離中心點(diǎn)最近的水平或垂直邊為漸變半徑。 closest-corner：以距離中心點(diǎn)最近的一角為漸變半徑。 farthest-side：和

10、closest-side 正好相反，（漸變形狀是圓形時(shí)）以距離中心點(diǎn)最遠(yuǎn)的一邊為漸變半徑，或者（漸變形狀是橢圓形時(shí)）以距離中心點(diǎn)最遠(yuǎn)的水平或垂直邊為漸變半徑。 farthest-corner：以距離中心點(diǎn)最遠(yuǎn)的一角為漸變半徑。 cover：和farthest-corner 完全一樣。 contain：和closest-side 完全一樣。,制作完美CSS3 漸變的簡(jiǎn)便方法,如果寫(xiě)出一個(gè)CSS3 漸變對(duì)你來(lái)說(shuō)有點(diǎn)難度，那你可以考慮使用在線漸變生成器。 如： 它的用戶界面風(fēng)格很像圖像處理軟件，你可以選擇顏色、過(guò)渡點(diǎn)、漸變風(fēng)格（線性漸變或徑向漸變），甚至可以選擇自己喜歡的顏色空間（HEX、RGB(A

11、)、HSL(A)）。這個(gè)在線漸變生成器還會(huì)加載一些預(yù)置的漸變供你選用和修改。如果這些還不足以打動(dòng)你，須知它還提供了可選的代碼設(shè)置，用來(lái)修正IE 9，讓它顯示漸變效果，而且還為老版本瀏覽器提供了備用的背景顏色。 它還能基于已有的圖片直接生成漸變。,在線漸變生成器preview,重復(fù)漸變,重復(fù)線性漸變： background: repeating-linear-gradient(90deg, #ffffff 0px, hsla(0, 1%, 50%,0.1) 5px); 重復(fù)徑向漸變： background: repeating-radial-gradient(2px 2px, ellipse,

12、hsla(0,0%,100%,1) 2px, hsla(0,0%,95%,1) 10px, hsla(0,0%,93%,1) 15px, hsla(0,0%,100%,1) 20px);,背景漸變圖案css3patterns,用CSS制作的背景圖案。代碼如下：,示例,body background-color:white; background-image: radial-gradient(hsla(0, 0%, 87%, 0.31) 9px, transparent 10px), /*徑向*/ repeating-radial-gradient(hsla(0, 0%, 87%, 0.31)

13、0, hsla(0, 0%, 87%, 0.31) 4px, transparent 5px, transparent 20px, hsla(0, 0%, 87%, 0.31) 21px, hsla(0, 0%, 87%, 0.31) 25px, transparent 26px, transparent 50px); /*重復(fù)徑向漸變*/ background-size: 30px 30px, 90px 90px; background-position: 0 0; ,CSS3 的響應(yīng)性,可以使用媒體查詢?yōu)榇笠暱冢ɑ蛐∫暱冢┰O(shè)定一個(gè)具體規(guī)則： media screen and (max-wi

14、dth: 768px) （略） ,例1:組合使用CSS3 屬性,現(xiàn)有一鏈接，樣式如下： #content a text-decoration: none; font: 2.25em /* 36px 16 */ BebasNeueRegular; 該鏈接按鈕的文字使用的是自定義字體（第5 章已講過(guò)） 現(xiàn)在為該鏈接添加新樣式。要求： 該鏈接按鈕有一個(gè)紅色的漸變背景 使用圓角效果 并有一點(diǎn)陰影,首先，針對(duì)老版本瀏覽器為其添加一個(gè)背景顏色。這樣就算瀏覽器無(wú)法渲染漸變，它至少也可以有一個(gè)紅色的背景。注意使用十六進(jìn)制顏色值。 #content a text-decoration: none; font:

15、2.25em /* 36px 16 */ BebasNeueRegular; background-color: #b01c20; ,接下來(lái)添加圓角效果 #content a text-decoration: none; font: 2.25em /* 36px 16 */ BebasNeueRegular; background-color: #b01c20; border-radius: 8px; 此處及后續(xù)章節(jié)中都請(qǐng)注意，在代碼示例中添加的所有CSS3屬性，一般都需要設(shè)定瀏覽器私有前綴，為簡(jiǎn)潔起見(jiàn)在此處省略了前綴,給其追加一個(gè)float: left，同時(shí)設(shè)置背景漸變： #content

16、a text-decoration: none; font: 2.25em /* 36px 16 */ BebasNeueRegular; background-color: #b01c20; border-radius: 8px; color: white; padding: 30px; float: left; background: linear-gradient(90deg, #b01c20 0%, #f15c60 100%); float:left 文本或圖像會(huì)移至父元素中的左側(cè)。 float:right 文本或圖像會(huì)移至父元素中的右側(cè)。 float:none 默認(rèn)。文本或圖像會(huì)顯示

17、于它在文檔中出現(xiàn)的位置,再追加一點(diǎn)上邊距，設(shè)置一下陰影效果： #content a text-decoration: none; font: 2.25em /* 36px 16 */ BebasNeueRegular; background-color: #b01c20; border-radius: 8px; color: white; padding: 30px; float: left; background: -moz-linear-gradient(90deg, #b01c20 0%, #f15c60 100%); margin-top: 30px; box-shadow: 5px

18、5px 5px hsla(0, 0%, 26.6667%, 0.8); ,再來(lái)些許浮雕效果，添加一點(diǎn)文字陰影和一個(gè)很細(xì)的白邊 #content a text-decoration: none; font: 2.25em /* 36px 16 */ BebasNeueRegular; background-color: #b01c20; border-radius: 8px; color: white; padding: 30px; float: left; background: -moz-linear-gradient(90deg, #b01c20 0%, #f15c60 100%); ma

19、rgin-top: 30px; box-shadow: 5px 5px 5px hsla(0, 0%, 26.6667%, 0.8); text-shadow: 0px 1px black; border: 1px solid #bfbfbf; ,使用 CSS3 替代圖片來(lái)實(shí)現(xiàn)這種效果，最贊的地方在于，可以隨時(shí)在超鏈接中包含任何內(nèi)容，而它的效果依然保持完美。,例2,有一種很常見(jiàn)的設(shè)計(jì)需求，就是制作一個(gè)頂部和底部使用不同背景圖片的頁(yè)面。或者也可能是要求頁(yè)面內(nèi)的某個(gè)內(nèi)容模塊的頂部和底部使用不同的背景圖片。 在使用CSS3 之前 兩個(gè)部分分別設(shè)定背景圖 有了CSS3，我們可以輕松解決這個(gè)問(wèn)題了。因?yàn)?/p>

20、CSS3 允許為一個(gè)元素設(shè)定多重背景（多重背景是CSS3 背景和邊框模塊的一部分）。除了IE 8 及更低版本外，其他瀏覽器均支持該特性。,CSS3的多重背景語(yǔ)法如下： background: url(./img/1.png), url(./img/2.png), url(./img/3.png); 和多重陰影的排列順序一樣，排在最前面的圖片在瀏覽器中顯示時(shí)會(huì)覆蓋在最上面。 還可以在聲明中追加背景顏色，像下面這樣： background: url(./img/1.png), url(./img/2.png), url(./img/3.png) left bottom, black; 將顏色定義在最后，這樣背景色就會(huì)顯示在所有背景圖片的下面。,不支持多重背景規(guī)則的瀏覽器（如IE 8 及更低版本）會(huì)直接忽略整條規(guī)則。所以你可以在CSS 多重背景規(guī)則之前再添加一條普通背景規(guī)則來(lái)作為針對(duì)老版本瀏覽器的備用方案。如： .footerBackground background-image: url(./img/bottomSlice.png); background-repeat: repeat-x; background-position: bottom;