CSS3漸變教學(xué)難點(diǎn)深度解析

【摘要】漸變是在CSS3中定義的圖像數(shù)據(jù)類型，可用于所有需要圖像值的CSS屬性。最新編著的網(wǎng)頁設(shè)計(jì)類教材中，漸變已成為必選的教學(xué)內(nèi)容，但這類教材對(duì)漸變知識(shí)的講解都不夠系統(tǒng)和深入，一些重要的概念也未提及。本文系統(tǒng)梳理了漸變數(shù)據(jù)類型、漸變線、漸變框、色標(biāo)等與漸變相關(guān)的基本術(shù)語，深入闡述了線性漸變和徑向漸變兩種漸變函數(shù)的參數(shù)的含義和使用。

【關(guān)鍵詞】漸變數(shù)據(jù)類型 ?線性漸變 ?徑向漸變

【中圖分類號(hào)】G642.3 ?【文獻(xiàn)標(biāo)識(shí)碼】A 【文章編號(hào)】2095-3089（2019）47-0242-02

CSS（Cascading Style Sheets）即層疊樣式表，是用于控制網(wǎng)頁顯示效果的技術(shù)。CSS3是CSS的第三個(gè)升級(jí)版本，它是一個(gè)規(guī)范集的總稱。W3C（World Wide Web Consortium，萬維網(wǎng)聯(lián)盟）在“CSS圖像模塊（第三版）”中定義了漸變，它是兩種顏色間或多種顏色間平滑過渡構(gòu)成的圖像 [1]。在CSS3之前，漸變效果是通過引入外部圖像文件實(shí)現(xiàn)的，這種方法要經(jīng)歷設(shè)計(jì)、切圖、應(yīng)用等過程，可擴(kuò)展性差，影響網(wǎng)頁性能[2]。在CSS3中，漸變是一種由用戶代理根據(jù)漸變代碼生成的圖像[3]，它可應(yīng)用于所有接受圖像值的屬性，如背景、邊框等。用CSS3漸變生成圖像，不僅加快了頁面的載入速度、減小帶寬占用，而且它在頁面縮放時(shí)的效果比使用外部圖像更好。CSS3漸變已得到各大瀏覽器的支持，應(yīng)用越來越廣泛。同時(shí)，作為教學(xué)內(nèi)容已引入網(wǎng)頁設(shè)計(jì)類課程。但許多教材、專著和技術(shù)博文在使用漸變相關(guān)的術(shù)語時(shí)，存在一些問題，一是表述錯(cuò)誤，如將漸變表述為漸變屬性;其次是對(duì)某些術(shù)語論述不深入，如漸變的起點(diǎn)和終點(diǎn)及其位置;再次是某些關(guān)鍵術(shù)語很少提及，如漸變的數(shù)據(jù)類型、漸變盒。本文對(duì)照W3C“CSS圖像模塊（第三版）”，參照一些教材、專著和博文，對(duì)漸變相關(guān)的術(shù)語進(jìn)行了梳理和深入的論述，旨在突破漸變的教學(xué)難點(diǎn)。

1.漸變相關(guān)概念

1.1圖像數(shù)據(jù)類型

在CSS中有兩種類型的圖像：簡單的靜態(tài)圖像，一般通過使用URL引用;動(dòng)態(tài)生成的圖像，比如通過漸變產(chǎn)生的圖像[1]，所有圖像的集合，構(gòu)成了圖像數(shù)據(jù)類型，用表示。

1.2漸變數(shù)據(jù)類型

漸變是兩種顏色間或多種顏色間平滑過渡構(gòu)成的圖像，所有通過漸變生成的圖像集合，構(gòu)成了漸變數(shù)據(jù)類型，用表示，是的子類型。在CSS3中，漸變數(shù)據(jù)類型由線性漸變和徑向漸變兩種漸變類型構(gòu)成。

1.3漸變函數(shù)

漸變數(shù)據(jù)類型的值（即圖像），通過下列4個(gè)函數(shù)定義。

（1）線性漸變函數(shù)：linear-gradient（）;

（2）重復(fù)的線性漸變函數(shù)：repeating-linear-gradient（）;

（3）徑向漸變函數(shù)：radial-gradient（）;

（4）重復(fù)的徑向漸變函數(shù)：

1.4漸變框

漸變生成的圖像既沒有固定尺寸，也沒有長寬比，它被繪制在一個(gè)矩形框中，矩形框的大小決定于應(yīng)用漸變的屬性，這個(gè)矩形框就叫漸變框[4]。

例如，如果漸變作為背景圖像（background-image）屬性的值，則漸變框默認(rèn)的大小為背景原點(diǎn)（background-origin）屬性設(shè)定的元素背景定位區(qū)域的大小，也可以通過背景尺寸（background-size）屬性設(shè)置漸變框的大小。

1.5漸變線

在幾何上，漸變線是一條虛擬的直線（線性漸變）或射線（徑向漸變）。

CSS3通過在漸變線上定義起點(diǎn)和終點(diǎn)，并指定漸變線上點(diǎn)的顏色來生成漸變。

1.6色標(biāo)

在漸變函數(shù)中，色標(biāo)表示漸變線上的點(diǎn)的位置和顏色。色標(biāo)可以是漸變線上的任意點(diǎn)，但，一般來說，色標(biāo)指代的點(diǎn)是起點(diǎn)、終點(diǎn)或兩者之間的點(diǎn)。每一個(gè)漸變按照幾何順序指定了一個(gè)色標(biāo)列表。

1.6.1色標(biāo)的位置值

位置值可以用長度或百分?jǐn)?shù)表示，長度是指漸變線上的點(diǎn)沿起點(diǎn)到終點(diǎn)方向，距離起點(diǎn)的長度;百分?jǐn)?shù)是指漸變線上的點(diǎn)距離起點(diǎn)的長度占比起點(diǎn)和終點(diǎn)間的長度。語法上位置值可以省略，如果省略，可以按以下規(guī)則計(jì)算色標(biāo)的位置值。

（1）如果第一個(gè)色標(biāo)沒有位置值，則位置值為0%;如果最后一個(gè)色標(biāo)沒有位置值，則位置值為100%。

（2）如果第一個(gè)色標(biāo)的位置值不為0，則位置值為零的色標(biāo)的顏色取第一個(gè)色標(biāo)的顏色;如果最后一個(gè)色標(biāo)的位置值不為起點(diǎn)和終點(diǎn)間的長度（即100%），則終點(diǎn)色標(biāo)的顏色取最后那個(gè)色標(biāo)的顏色。

（3）如果沒有設(shè)置位置值，而且它既不是第一個(gè)色標(biāo)，也不是最后一個(gè)色標(biāo)，則取其前后兩個(gè)色標(biāo)的位置值的中間值作為色標(biāo)的位置值。如果一個(gè)色標(biāo)列表中有連續(xù)多個(gè)色標(biāo)缺少位置值，那么通過平均分配它們之間的間隔值來計(jì)算位置值。

（4）默認(rèn)情況下，色標(biāo)列表中的色標(biāo)按升序排列。如果一個(gè)色標(biāo)的位置值小于其前面所有色標(biāo)的位置值，則這個(gè)色標(biāo)取其前面色標(biāo)中的最大值作為位置值。

1.6.2變色點(diǎn)

默認(rèn)情況下，兩個(gè)相鄰色標(biāo)的顏色轉(zhuǎn)換發(fā)生在兩個(gè)色標(biāo)之間的中點(diǎn)位置。可以通過在兩個(gè)色標(biāo)之間添加一個(gè)只有位置值的色標(biāo)，來將這個(gè)顏色轉(zhuǎn)換點(diǎn)從中點(diǎn)移動(dòng)到兩個(gè)色標(biāo)之間的任意點(diǎn)，這種色標(biāo)叫變色點(diǎn)。

例如，在漸變linear-gradient（red 10%，blue 90%）中，變色點(diǎn)在50%，而在漸變linear-gradient（red 10%，30%，blue 90%）中，變色點(diǎn)向前移動(dòng)到了30%。

1.6.3帶多個(gè)位置值的色標(biāo)

一個(gè)色標(biāo)可以帶有多個(gè)位置值。

例如，漸變linear-gradient（red， orange 10% 30%， yellow 50% 70%， green 90%）中，從10%至30%是純的橙色，從50%至70%是純的黃色。

2.線性漸變

線性漸變通過指定一條漸變線，并沿漸變線放置幾種顏色來創(chuàng)建。每種顏色沿漸變方向平滑過渡到下一種顏色，漸變線上每一個(gè)點(diǎn)都有不同的顏色。線性漸變繪制一系列垂直于漸變線的彩色線，每條線的顏色是它和漸變線交點(diǎn)的顏色。

2.1漸變線的指定

線性漸變的漸變線是一條經(jīng)過漸變框中心點(diǎn)的直線，可以用角度值和關(guān)鍵字值來設(shè)定，如果省略，默認(rèn)值為“to bottom”。

2.1.1角度值

“0deg”表示從下向上的正北方向，順時(shí)針方向旋轉(zhuǎn)為正角，逆時(shí)針方向旋轉(zhuǎn)為負(fù)角。角度為零時(shí)，單位可以省略。角度值可以用關(guān)鍵字值或數(shù)值表示。

2.1.2關(guān)鍵字值

關(guān)鍵字值表示漸變線指向一條邊或指向一個(gè)角。

（1）指向一條邊

關(guān)鍵字“to top”、“to right”、“to bottom”、“to left”都是指向一條邊，分別對(duì)應(yīng)“0deg”、“90deg”、“180deg”、“270deg”。

（2）指向一個(gè)角

如果指定的是漸變框的一個(gè)角，例如，“to top left”，則漸變線的指向與指定的角在同一象限內(nèi)，且垂直于該角所對(duì)的對(duì)角線。

2.1.3漸變的起點(diǎn)和終點(diǎn)

從與漸變線在同一象限的漸變框的兩個(gè)對(duì)角分別向漸變線作垂線，垂線與漸變線的交點(diǎn)就是起點(diǎn)和終點(diǎn)，其中，沿漸變線方向，在漸變線上端的是終點(diǎn)，起點(diǎn)和終點(diǎn)是對(duì)稱點(diǎn)。

3.徑向漸變

徑向漸變是從一個(gè)中心點(diǎn)開始，以圓形或橢圓形平滑地向外擴(kuò)散。徑向漸變是通過指定漸變的中心點(diǎn)、邊緣形狀及大小、一個(gè)色標(biāo)列表來定義。從中心點(diǎn)開始，向邊緣形狀過渡，繪制均勻縮放的彩色同心橢圓或圓，每個(gè)橢圓或圓的顏色是它和漸變線交點(diǎn)的顏色。

3.1漸變的中心點(diǎn)位置

漸變的中心點(diǎn)通過指定中心點(diǎn)坐標(biāo)來確定，漸變框是中心點(diǎn)的定位區(qū)域。中心點(diǎn)坐標(biāo)遵循“CSS3位置數(shù)據(jù)類型”定義的規(guī)則。如果沒有指定中心點(diǎn)，則漸變框的中心點(diǎn)即為漸變的中心點(diǎn)。

3.2邊緣形狀

漸變的形狀可以是圓或者是橢圓。漸變終止位置的圓或橢圓叫邊緣形狀。

如果沒有指定形狀，但指定了一個(gè)單值作為形狀的大小，則表示形狀為圓，否則，形狀為橢圓。

3.3徑向漸變的漸變線

徑向漸變的漸變線是一條虛擬的射線，射線的端點(diǎn)是漸變的中心點(diǎn)，并向一個(gè)方向無限延伸。中心點(diǎn)的位置值為0%，漸變線與邊緣形狀的交點(diǎn)的位置值為100%。色標(biāo)的位置值可以小于0%，為負(fù)，也可以大于100%。

3.4邊緣形狀的大小

邊緣形狀的大小通過指定關(guān)鍵字值或一個(gè)長度值（表示圓）或兩個(gè)值（橢圓）來定義。如果沒有指定任何值，則取值為“farthest-corner”。

（1）關(guān)鍵字值

用于描述邊緣輪廓大小的關(guān)鍵字值，見表1。

（2）一個(gè)長度值（不能是百分?jǐn)?shù)）

如果給定一個(gè)長度值，表示圓的半徑，不能為負(fù)。

（3）兩個(gè)值（可以是百分?jǐn)?shù)或長度值）

如果給定兩個(gè)值，表示橢圓的半徑。第一個(gè)值表示水平半徑，第二個(gè)值表示垂直半徑。百分比值是相對(duì)于漸變框的相應(yīng)維度，負(fù)值無效。

4.結(jié)論

漸變的教學(xué)難點(diǎn)是對(duì)漸變的基本概念的表述和講授，目前，網(wǎng)頁設(shè)計(jì)類教材或?qū)Ｖ毡榇嬖趯?duì)基本概念講解不全或中文表述不一致等問題，給學(xué)生學(xué)習(xí)帶來了一些困惑。教學(xué)過程中有必要參照W3C規(guī)范，深入講解清楚關(guān)鍵概念，并輔以實(shí)踐應(yīng)用，必能化難為易。

參考文獻(xiàn)：

[1]MDN.[EB/OL].https：//developer.mozilla.org/zh-CN/docs/Web/CSS/gradient

[2]大漠.圖解CSS3核心技術(shù)與案例實(shí)戰(zhàn)[M].北京：機(jī)械工業(yè)出版社，2014：312-357.

[3]CSS魔法.CSS揭秘[M].北京：人民郵電出版社，2016：27-50.

[4]W3C.CSS Images Module Level 3 Editors Draft ?[EB/OL].https：//drafts.csswg.org/css-images-3，2018-11-07.

作者簡介：

黃志剛（1965-），男，本科，高級(jí)工程師，研究領(lǐng)域：Web技術(shù)，大數(shù)據(jù)技術(shù)。