江玉珍，朱映輝，黃偉，陸錫聰

（韓山師范學(xué)院計算機(jī)與信息工程學(xué)院，潮州 521041）

0 引言

HTML5是HTML標(biāo)準(zhǔn)的第五次修訂，由W3C推薦，它的開發(fā)目標(biāo)是為桌面和移動平臺帶來無縫銜接的豐富內(nèi)容?；谄鋸V泛的應(yīng)用前景，HTML5已成為當(dāng)前網(wǎng)頁設(shè)計的主要技術(shù)，也是高?！毒W(wǎng)頁設(shè)計與制作》課程的基礎(chǔ)內(nèi)容。網(wǎng)頁設(shè)計離不開網(wǎng)頁排版的層疊樣式表CSS，CSS3是當(dāng)前最新的CSS技術(shù)，有效運(yùn)用CSS3可令網(wǎng)頁的布局更加靈活，頁面效果更新穎美觀，其圖形圖像特效和動畫效果已經(jīng)能夠取代Flash或JavaScript的很多特效。脫離了CSS3，HTML5將黯然失色無法展示其強(qiáng)大的支撐能力。本文重點(diǎn)闡述CSS3的擴(kuò)展功能，以簡明有代表性的案例對CSS3技術(shù)應(yīng)用進(jìn)行探討，并以此作為HTML5網(wǎng)頁的教學(xué)拓展。

1 CSS3新技術(shù)概述

CSS即層疊樣式表（Cascading StyleSheet）。在網(wǎng)頁制作時采用層疊樣式表技術(shù)，可以有效地對頁面的布局、字體、顏色、背景和其他效果實(shí)現(xiàn)更加精確的控制[1]。CSS3是CSS技術(shù)的升級版本，相比原來的CSS2版本，CSS3新增了八大功能，分別如下。

（1）圓角：可以指定一個元素的任意一個角或全部角為圓角，還可以設(shè)置圓角的半徑（即曲度）；

（2）多背景：在CSS3中可以在一個元素中顯示多個背景圖像，還可以將多個背景圖像進(jìn)行重疊顯示；

（3）@font-face：允許用戶輸入自己的字體出現(xiàn)在網(wǎng)站上,即使該特定的字體在終端計算機(jī)上沒有安裝；

（4）動畫：使用@keyframes規(guī)則創(chuàng)建由當(dāng)前樣式逐漸改為新樣式的動畫效果；

（5）漸變色：允許元素設(shè)置背景雙色或多色、線性或徑向等平穩(wěn)過渡的漸變色；

（6）box-陰影：可為盒子元素圖像元素等添加陰影，陰影可設(shè)置為半透明的或漸變色；

（7）RGBa-透明色：RGBa中的a代表透明色，用于設(shè)置元素不透明度。

（8）文字陰影：設(shè)置文字陰影效果。

2 CSS3新技術(shù)對盒子背景、圖像、表格的支持

2.1 背景漸變色

以下代碼實(shí)現(xiàn)紅、黃、藍(lán)線性漸變的背景色，網(wǎng)頁效果如圖 1（a）。

若將最后“background”屬性修改如下則實(shí)現(xiàn)紅、黃、藍(lán)徑向漸變的背景色，網(wǎng)頁效果如圖1（b）。

background:radial-gradient（red,yellow,blue）;

CSS3定義漸變的顏色數(shù)可以多于等于2種，各顏色間用逗號（,）分隔開。

圖1 漸變的背景色

2.2 CSS 3半透明、圓角、陰影圖像特效

以下代碼實(shí)現(xiàn)圖像的半透明、圓角及陰影特效，原圖及其網(wǎng)頁效果如圖2。

圖2 圖像的半透明、圓角及陰影效果

其中，opacity屬性的值在0～1之間，值越小圖像越透明。border-radius屬性通常有三種取值：屬性值只有一個值時，如“border-radius:70px”表示四個邊角均為半徑70px圓角；屬性值有2個值時表示兩對對角的圓角設(shè)置；屬性值有4個值時按左上、右上、右下和左下分別表示各個角圓角設(shè)置。

2.3 多圖像背景

以下代碼實(shí)現(xiàn)將三張圖像設(shè)置成重疊背景，原圖及重疊背景網(wǎng)頁效果如圖3。

當(dāng)設(shè)置多張圖像時，這些背景圖是分層的，先讀入的圖像將置于最前端。

2.4 CSS 3的圓角表格

CSS3的圓角功能不僅能對圖像產(chǎn)生效果，其對表格元素同樣可以實(shí)現(xiàn)，以下CSS3樣式就能將表格及表項都設(shè)置成圓角，效果如圖4所示。

圖4 圓角表格效果

圖3 三張圖像原圖及其重疊圖像背景的網(wǎng)頁效果

3 CSS3的動態(tài)導(dǎo)航設(shè)計

3.1 “transform”實(shí)現(xiàn)形變導(dǎo)航按鈕

CSS3的“transform”形變功能可以實(shí)現(xiàn)對象的變形變換，以下CSS3樣式可實(shí)現(xiàn)導(dǎo)航區(qū)的按鈕旋轉(zhuǎn)觸發(fā)特效。效果如圖5所示。

CSS3的“transform”功能可以實(shí)現(xiàn)旋轉(zhuǎn)（rotate）、縮放（scale）、傾斜（skew）等多種形變，這樣能使網(wǎng)頁元素具有一定的動感功能，而這樣以功能在傳統(tǒng)網(wǎng)頁制作上是需要借助Flash或JavaScript才能實(shí)現(xiàn)的。

圖5 能旋轉(zhuǎn)形變的導(dǎo)航區(qū)按鈕

3.2 CSS “3transition”實(shí)現(xiàn)動態(tài)下拉菜單

除了transform變形動畫功能，CSS3還有“transition”過渡動畫功能。很多常規(guī)JavaScript處理功能也可用之高效取代，以下代碼就是直接運(yùn)用CSS3實(shí)現(xiàn)下拉菜單的樣式代碼，其中關(guān)鍵步驟是用“transition”屬性實(shí)現(xiàn)菜單向下漸慢“彈出”的過渡效果。網(wǎng)頁效果如圖6。

transition用于設(shè)置對象在一定的時間內(nèi)平滑地狀態(tài)過渡，其過渡方式非常多，除“ease”逐漸變慢外，還有“l(fā)inear”勻速、“ease-in”加速、“cubic-bezier”cubic-bezier曲線等，其選擇性多應(yīng)用非常靈活。

圖6 CSS3實(shí)現(xiàn)網(wǎng)頁下拉菜單效果

4 結(jié)語

HTML5及CSS3在推出早期并不能兼容于所有瀏覽器，部分瀏覽器還需要編寫專用的CSS3私有屬性才能顯示效果[2]。但隨著Internet不斷發(fā)展，用戶對網(wǎng)頁頁面效果的訴求越來越強(qiáng)列，CSS3技術(shù)的優(yōu)越性使大多數(shù)瀏覽器紛紛認(rèn)同并大力支持，其樣式修飾功能是其他技術(shù)無法替代的。因此，在學(xué)習(xí)HTML5網(wǎng)頁開發(fā)時緊密結(jié)合CSS3技術(shù)，只有不斷挖掘、認(rèn)真實(shí)踐、正確運(yùn)用CSS3，才能讓網(wǎng)站網(wǎng)頁更長遠(yuǎn)地立足于Internet中不容易落伍淘汰。

[1]陳建孝,江玉珍,陸錫聰,余曉春.網(wǎng)頁制作案例教程[M].北京:人民郵電出版社,2017.1.

[2]劉增杰,臧順娟,何楚斌.精通HTML5+CSS3+JavaScript網(wǎng)頁設(shè)計[M].北京：清華大學(xué)出版社,2012.8.