第14章移動(dòng)網(wǎng)頁設(shè)計(jì)基礎(chǔ)CSS3

1、CSS3是CSS規(guī)范的最新版本，在CSS2.1的基礎(chǔ)上增加了很多強(qiáng)大的新功能，以幫助開發(fā)人員解決一些問題，例如圓角功能、多背景、透明度、陰影等功能等。CSS2.1是單一的規(guī)范，而CSS3被劃分成幾個(gè)模塊組，每個(gè)模塊組都有自己的規(guī)范。這樣的好處是整個(gè)CSS3的規(guī)范發(fā)布不會(huì)因?yàn)椴糠蛛y纏的部分而影響其他模塊的推進(jìn)。邊框 背景文本多列轉(zhuǎn)換過渡動(dòng)畫用戶界面 通過CSS3，能夠創(chuàng)建圓角邊框，向矩形添加陰影，使用圖片來繪制邊框，并且不需使用設(shè)計(jì)軟件，如Photoshop。對(duì)于邊框，在CSS2中僅局限與邊框的線型、粗細(xì)、顏色的設(shè)置，如果需要特殊的邊框效果，只能使用背景圖片來模仿。CSS3的border-ima

2、ge屬性使元素邊框的樣式變得豐富起來，還可以使用該屬性實(shí)現(xiàn)類似background的效果，對(duì)邊框進(jìn)行扭曲、拉伸和平鋪等。圓角是CSS3中使用最多的一個(gè)屬性，原因很簡單：圓角比直線性更美觀，而且不會(huì)與設(shè)計(jì)產(chǎn)生任何沖突。在CSS2中，大家都碰到過圓角的制作。當(dāng)時(shí)，對(duì)于圓角的制作，我們都需要使用多張圓角圖片作為背景，分別應(yīng)用到每個(gè)角上，制作起來非常麻煩 。14.1.1 14.1.1 圓角邊框圓角邊框border-radiusborder-radiusborder-images可以說也是CSS3中的重量級(jí)屬性，從其字面意思上看，我們可以理解為“邊框圖片”，通俗的說也就是使用圖片作為邊框，這樣一來邊框的

3、樣式就不像以前那樣只有實(shí)線、虛線、點(diǎn)狀線那樣單調(diào)了，通過CSS3的border-image屬性，可以使用圖片來創(chuàng)建邊框。14.1.2 14.1.2 邊框圖像邊框圖像border-imageborder-image14.1.3 14.1.3 邊框陰影邊框陰影box-shadowbox-shadow以前為了給一個(gè)塊元素設(shè)置陰影的時(shí)候，只能通過給該塊級(jí)元素設(shè)置背景來實(shí)現(xiàn)，當(dāng)然在IE下還可以通過微軟的shadow濾鏡來實(shí)現(xiàn)，不過也只在IE下有效，那它的兼容性也就可想而知了。但是CSS3的box-shadow屬性的出現(xiàn)使這一問題變得簡單了。在CSS3中，box-shadow用于向方框添加陰影。CSS3不

4、再局限于背景色、背景圖像的運(yùn)用，新特 性 中 添 加 了 多 個(gè) 新 的 屬 性 值 ， 例 如background-origin、background-clip、background-size，此外，還可以在一個(gè)元素上設(shè)置多個(gè)背景圖片。這樣，如果要設(shè)計(jì)比較復(fù)雜的Web頁面效果，就不再需要使用一些多余標(biāo)簽來輔助實(shí)現(xiàn)了。14.2.1 14.2.1 背景圖片尺寸背景圖片尺寸background-sizebackground-size在CSS3之前，背景圖片的尺寸是由圖片的實(shí)際尺寸決定的。在CSS3中，可以規(guī)定背景圖片的尺寸，這就允許我們?cè)诓煌沫h(huán)境中重復(fù)使用背景圖片。14.2.2 14.2.2 背

5、景圖片定位區(qū)域背景圖片定位區(qū)域background-originbackground-originbackground-origin屬性規(guī)定背景圖片的定位區(qū)域。14.2.3 14.2.3 背景繪制區(qū)域背景繪制區(qū)域background-clipbackground-clipbackground-clip該屬性指定了背景在哪些區(qū)域可以顯示，但與背景開始繪制的位置無關(guān)，背景的繪制的位置可以出現(xiàn)在不顯示背景的區(qū)域，這時(shí)就相當(dāng)于背景圖片被不顯示背景的區(qū)域裁剪了一部分一樣。對(duì)于網(wǎng)頁設(shè)計(jì)師，文本也同樣是不可忽視的因素。一直以來都是Photoshop來編輯一些漂亮的樣式，并插入文本。同樣CSS3也可以幫你搞定

6、，甚至效果會(huì)更好。CSS3包含多個(gè)新的文本特性。在CSS3中，text-shadow可向文本應(yīng)用陰影。可以設(shè)置水平陰影、垂直陰影、模糊距離，以及陰影的顏色。14.3.1 14.3.1 文本陰影文本陰影text-shadowtext-shadow14.3.2 14.3.2 強(qiáng)制換行強(qiáng)制換行word-wrapword-wrapword-wrap屬性允許長單詞或URL地址換行到下一行。設(shè)置或檢索是否使用一個(gè)省略標(biāo)記（.）標(biāo)示對(duì)象內(nèi)文本的溢出。14.3.3 14.3.3 文本溢出文本溢出text-overflowtext-overflow14.3.4 14.3.4 文字描邊文字描邊text-strok

7、etext-strokeCSS邊框的一個(gè)不足就是只有矩形的元素才能使用。text-stroke可以為文字添加描邊。它不但可以設(shè)置文字邊框的寬度，也能設(shè)置其顏色。14.3.5 14.3.5 文本填充顏色文本填充顏色text-fill-colortext-fill-colortext-fill-color是CSS3中的屬性，表示文字顏色填充，實(shí)現(xiàn)的效果基本上與color一樣，目前僅webkit核心的瀏覽器下支持此屬性。從某種程度上講text-fill-color與color基本上的作用是一樣的，如果同時(shí)設(shè)置color與text-fill-color屬性，顯然是顏色填充覆蓋本身的顏色，也就是文字顯示

8、text-fill-color設(shè)置的顏色。通過CSS3，能夠創(chuàng)建多個(gè)列來對(duì)文本進(jìn)行布局，就像報(bào)紙那樣！在本節(jié)中，將學(xué)習(xí)如下多列屬性：column-count、column-gap、column-rule。14.4.1 14.4.1 創(chuàng)建多列創(chuàng)建多列column-countcolumn-countcolumn-count屬性規(guī)定元素應(yīng)該被分隔的列數(shù)。column-width設(shè)置對(duì)象每列的寬度。14.4.2 14.4.2 列的寬度列的寬度column-widthcolumn-widthcolumn-gap屬性規(guī)定列之間的間隔。14.4.3 14.4.3 列的間隔列的間隔column-gapcolu

9、mn-gap14.4.4 14.4.4 列的規(guī)則列的規(guī)則column-rulecolumn-rulecolumn-rule規(guī)定列之間的寬度、樣式和顏色規(guī)則。Transform字面上就是變形，轉(zhuǎn)換的意思。在CSS3中transform主要包括以下幾種：旋轉(zhuǎn)、扭曲、縮放和移動(dòng)。14.5.1 14.5.1 移動(dòng)移動(dòng)translatetranslate通過translate()方法，元素從其當(dāng)前位置移動(dòng)，根據(jù)給定的left（x坐標(biāo)）和top（y坐標(biāo)） 位置參數(shù)。移動(dòng)translate分為三種情況：translate(x,y)水平方向和垂直方向同時(shí)移動(dòng)（也就是X軸和Y軸同時(shí)移動(dòng)）；translateX(

10、x)僅水平方向移動(dòng)（X軸移動(dòng)）；translateY(Y)僅垂直方向移動(dòng)（Y軸移動(dòng)）。14.5.2 14.5.2 旋轉(zhuǎn)旋轉(zhuǎn)rotaterotaterotate()方法通過指定的角度參數(shù)對(duì)原元素指定一個(gè)2D旋轉(zhuǎn)，如果設(shè)置的值為正數(shù)表示順時(shí)針旋轉(zhuǎn)，如果設(shè)置的值為負(fù)數(shù)，則表示逆時(shí)針旋轉(zhuǎn)。14.5.3 14.5.3 縮放縮放scalescale通過scale()方法，元素的尺寸會(huì)增加或減少，根據(jù)給定的寬度（X軸）和高度（Y軸）參數(shù)?？s放scale和移動(dòng)translate是極其相似，也具有三種情況：scale(x,y)使元素水平方向和垂直方向同時(shí)縮放（也就是X軸和Y軸同時(shí)縮放）；scaleX(x)元素僅

11、水平方向縮放（X軸縮放）；scaleY(y)元素僅垂直方向縮放（Y軸縮放），但它們具有相同的縮放中心點(diǎn)和基數(shù)，其中心點(diǎn)就是元素的中心位置，縮放基數(shù)為1，如果其值大于1元素就放大，反之其值小于1，元素縮小。14.5.4 14.5.4 扭曲扭曲skewskew扭曲skew和translate、scale一樣同樣具有三種情況：skew(x,y)使元素在水平和垂直方向同時(shí)扭曲（X軸和Y軸同時(shí)按一定的角度值進(jìn)行扭曲變形）；skewX(x)僅使元素在水平方向扭曲變形（X軸扭曲變形）；skewY(y)僅使元素在垂直方向扭曲變形（Y軸扭曲變形）。14.5.5 14.5.5 矩陣矩陣matrix()matrix

12、()matrix()方法把所有2D轉(zhuǎn)換方法組合在一起。matrix()方法需要六個(gè)參數(shù)，包含數(shù)學(xué)函數(shù)，允許旋轉(zhuǎn)、縮放、移動(dòng)以及傾斜元素，相當(dāng)于直接應(yīng)用一個(gè)變換矩陣。CSS3的“過渡”（transition）特性能在Web制作中實(shí)現(xiàn)一些簡單的動(dòng)畫效果，讓某些效果變得更具流線性、平滑性。CSS3“動(dòng)畫”特性能夠?qū)崿F(xiàn)更復(fù)雜的樣式變化，以及一些交互效果，而不需要使用任何Flash或JavaScript腳本代碼。14.7.1 14.7.1 規(guī)則聲明動(dòng)畫規(guī)則聲明動(dòng)畫keyframeskeyframes如需在CSS3中創(chuàng)建動(dòng)畫，需要學(xué)習(xí)keyframes規(guī)則。keyframes規(guī)則用于創(chuàng)建動(dòng)畫。在keyfr

13、ames中規(guī)定某項(xiàng)CSS樣式，就能創(chuàng)建由當(dāng)前樣式逐漸改為新樣式的動(dòng)畫效果。不同的瀏覽器要給keyframes添加不同的前綴，為使動(dòng)畫在所有瀏覽器正常工作，可以同時(shí)聲明多個(gè)不同前綴的同名動(dòng)畫 。14.7.2 animation14.7.2 animation使用動(dòng)畫使用動(dòng)畫animation只應(yīng)用在頁面上已存在的DOM元素上，使用CSS3的Animation制作動(dòng)畫可以省去復(fù)雜的代碼。CSS3的animation類似于transition屬性，他們都是隨著時(shí)間改變?cè)氐膶傩灾?。他們主要區(qū)別是transition需要觸發(fā)一個(gè)事件（hover事件或click事件等）才會(huì)隨時(shí)間改變其CSS屬性；而an

14、imation在不需要觸發(fā)任何事件的情況下也可以顯式的隨著時(shí)間變化來改變?cè)谻SS的屬性值，從而達(dá)到一種動(dòng)畫的效果。在CSS3中，新的用戶界面特性包括重設(shè)元素尺寸、盒尺寸以及輪廓等。14.8.1 box-sizing14.8.1 box-sizingbox-sizing是CSS3的box屬性之一。box-sizing屬性允許以確切的方式定義適應(yīng)某個(gè)區(qū)域的具體內(nèi)容。例如，假如需要并排放置兩個(gè)帶邊框的框，可通過將box-sizing設(shè)置為border-box。這可令瀏覽器呈現(xiàn)出帶有指定寬度和高度的框，并把邊框和內(nèi)邊距放入框中。14.8.2 resize14.8.2 resize在CSS3，resi

15、ze屬性規(guī)定是否可由用戶調(diào)整元素尺寸。14.8.3 outline-offset14.8.3 outline-offsetoutline-offset屬性對(duì)輪廓進(jìn)行偏移，并在超出邊框邊緣的位置繪制輪廓。CSS3是現(xiàn)在Web開發(fā)領(lǐng)域的技術(shù)熱點(diǎn)，它給Web開發(fā)帶來了革命性的影響。下面介紹CSS3應(yīng)用的例子，從中你能體會(huì)到CSS3中許多讓人欣喜的特性。14.9.114.9.1鼠標(biāo)放上去顯示全部內(nèi)容鼠標(biāo)放上去顯示全部內(nèi)容下面制作一個(gè)鼠標(biāo)移動(dòng)到文字上顯示全篇文章內(nèi)容的實(shí)例，其代碼如下。14.9.2 14.9.2 美觀的圖片排列美觀的圖片排列本例演示如何排列美觀的圖片，并旋轉(zhuǎn)圖片。14.10經(jīng)典習(xí)題1. 1.