靠CSS 就寫出創(chuàng)意十足的設(shè)計(jì)是很困難的。到目前為止，就創(chuàng)建視覺特效而言，CSS 這門語言還是存在諸多限制。想用CSS 寫出Photoshop 般的效果，還差得很遠(yuǎn)，個(gè)別情況下仍需要各種奇奇怪怪的招術(shù)助陣。

以前，要繞過種種限制，不得不犧牲簡(jiǎn)潔性（加入大量元素，只為了展示效果的細(xì)節(jié)），或者犧牲性能（為了展現(xiàn)視覺效果，頁面中放了太多圖片及JavaScript）。

今天，我們就來介紹幾種能夠通過CSS 實(shí)現(xiàn)的特效。其中用到的一些CSS 特性還很新，瀏覽器支持不充分，但也有非常成熟的。很多特性在SVG 中已經(jīng)存在很多年了，最近才加入到CSS 中。

這些技術(shù)能夠提升你的設(shè)計(jì)，就像做菜添加了調(diào)味料，平淡無奇的一盤菜也能頓時(shí)濃香四溢。使用它們的時(shí)候也得小心謹(jǐn)慎，必須考慮漸進(jìn)式增強(qiáng)。另外也要知道，其中一些技術(shù)會(huì)有相關(guān)的bug。即使在支持它們的瀏覽器中，它們也通常還并不成熟。

圖1 展示了一個(gè)頁面（一些天體的介紹），其中包含很多視覺特效。就在幾年前，要通過CSS 實(shí)現(xiàn)這些效果幾乎是不可能的。整個(gè)頁面布局，就算能做出來，也要借助大量圖片和額外的HTML 元素。

今天，這些效果已經(jīng)能夠在很多瀏覽器中通過CSS 來呈現(xiàn)了，即使做不到也能平穩(wěn)地退化為可用版本。在一個(gè)頁面上集成大量視覺特效仍須謹(jǐn)慎，因?yàn)榭赡茉斐尚阅荛_銷，代價(jià)有大有小。

盡管如此，通過CSS 來完成它們?nèi)匀挥泻芏嗪锰帲驗(yàn)榭梢詼p少不必要的標(biāo)記，而且維護(hù)起來比較容易。此外，隨著瀏覽器支持相應(yīng)的規(guī)范，性能也會(huì)越來越好。

接下來，我們就以這個(gè)“觀星指南”頁面作為例子，逐個(gè)講解其中涉及的技術(shù)點(diǎn)。

CSS Shapes

大家可能都知道，網(wǎng)頁布局基本上都是由矩形構(gòu)成的，CSS Shapes 是一個(gè)新標(biāo)準(zhǔn)，旨在讓W(xué)eb 設(shè)計(jì)者能使用各種形狀。形狀元素不僅會(huì)影響界面的外觀，還會(huì)影響頁面的內(nèi)容流。

細(xì)說形狀

CSS Shapes 包含兩組新屬性，一組用于設(shè)置影響盒子中內(nèi)容的形狀，另一組用于設(shè)置影響形狀元素周邊內(nèi)容流的形狀。在圖2 中，我們看到一個(gè)被設(shè)置為圓形的形狀。其中左邊的圖形展示了外部形狀如何影響周邊的內(nèi)容，而右邊的圖形展示了圓形中的內(nèi)容如何受到內(nèi)部形狀的影響。

這兩種形狀分別由不同級(jí)別的CSS Shapes 規(guī)范定義。其中shape-outside 屬性（在CSS Shapes Level 1 中定義）是唯一相對(duì)比較成熟的。本文不涉及shape-inside，因?yàn)槟壳斑€沒有瀏覽器實(shí)現(xiàn)它，也許在不久的將來會(huì)有吧。

shape-outside 屬性只能應(yīng)用給浮動(dòng)元素。這個(gè)屬性不改變?cè)刈陨淼耐庥^，只會(huì)通過設(shè)置形狀影響其外部?jī)?nèi)容流。

在我們例子中的“Moon”部分，通過設(shè)置shape-outside: circle();實(shí)現(xiàn)了文本流環(huán)繞月亮圖片的效果（見圖3）。

.fig-moon {
 float: right;
 max-width: 40%;
 shape-outside: circle();
}

在解釋形狀構(gòu)造原理之前，先了解一下shape-outside 如何影響布局。圖片文件本身的背景是黑色的，如果把這一區(qū)塊的背景改成其他顏色，我們會(huì)看得更清楚（見圖4）。圖片本身還是方形的，但文本流環(huán)繞著其中的圓形。在不支持CSS 形狀的瀏覽器中，文本會(huì)像往常一樣環(huán)繞矩形。

注意：如圖4 所示，文本流只繞排在浮動(dòng)元素的左側(cè)。只能讓形狀的一側(cè)影響文本的行盒子。即使形狀右側(cè)有空間，文本也不會(huì)填進(jìn)去。

1. 形狀函數(shù)

前面例子中的shape-outside 屬性使用了一個(gè)值：circle()。這是一個(gè)形狀函數(shù)，類似的形狀函數(shù)還有ellipse()、polygon()、inset()。前兩個(gè)分別用于定義橢圓形和多邊形，inset()則表示嵌入在盒子邊界內(nèi)的矩形，也可以指定圓角，算是CSS 2.1 中clip 屬性的加強(qiáng)版，只是語法不同而已。

此處圓形和橢圓形的語法，類似于第5 章的放射性漸變的大小及位置的語法：

.shape-circle {
 /* 圓形接受一個(gè)半徑值和一個(gè)位置值 */
 shape-outside: circle(150px at 50%);
}
.shape-ellipse {
 /* 橢圓形接受兩個(gè)半徑值和一個(gè)位置值 */
 shape-outside: ellipse(150px 40px at 50% 25%);
}

與漸變函數(shù)類似，圓形和橢圓形函數(shù)也有合理的默認(rèn)值。前面月亮圖片的circle()函數(shù)并未傳入?yún)?shù)，而默認(rèn)的參數(shù)是以元素中心為圓心，以最近邊為半徑。

inset()函數(shù)需要傳入一組長(zhǎng)度值，分別表示到上、右、下、左邊的距離，很像margin 和padding 簡(jiǎn)寫。同樣，1~3 個(gè)值的外邊距和內(nèi)邊距簡(jiǎn)寫規(guī)則在這里也適用。此外，還可以通過round關(guān)鍵字指定圓角，隨后是半徑值，與border-radius 屬性的類似：

.shape-inset {
 /* 距離外部盒子的上、下邊各20 像素，
 * 距離外部盒子的左、右邊各30 像素，
 * 還有半徑為10 像素的圓角
 */
 shape-outside: inset(20px 30px round 10px);
}

相對(duì)復(fù)雜一些的是polygon()函數(shù)。這個(gè)函數(shù)接受一系列坐標(biāo)對(duì)，用于在盒子表面指定多個(gè)點(diǎn)，坐標(biāo)相對(duì)于盒子的左上角，最終把各個(gè)點(diǎn)連接起來就是要?jiǎng)?chuàng)建的形狀。在“Planets”部分，我們?yōu)橥列莿?chuàng)建了一個(gè)多邊形。

創(chuàng)建多邊形最簡(jiǎn)單的一種方式就是使用CSS Shapes Editor 插件，它支持Chrome 和Opera。Chrome 和Opera 都支持CSS Shapes，而且會(huì)在檢查形狀元素時(shí)給出預(yù)覽。這個(gè)插件會(huì)添加額外的工具，因此既可以通過它看到形狀如何影響頁面，也可以通過創(chuàng)建并拖動(dòng)控制點(diǎn)來創(chuàng)建新形狀（見圖5）。

然后就可以把得到的多邊形復(fù)制粘貼到代碼中：

.fig-planet {
 float: right;
 max-width: 65%;
 shape-outside: polygon(41.85% 100%, 22.75% 92.85%, 5.6% 73.3%, 0.95% 52.6%, 5.6% 35.05%,
21.45% 17.15%, 37.65% 12.35%, 40% 0, 100% 0%, 100% 100%);
}

多邊形中每個(gè)點(diǎn)的坐標(biāo)以百分比表示，這樣可以保證最大的靈活度。當(dāng)然也可以在這里使用任意長(zhǎng)度值，比如像素、em，甚至calc()表達(dá)式。

2. 形狀圖片

基于復(fù)雜的圖片創(chuàng)建多邊形會(huì)非常麻煩。好在我們可以直接在圖片的源文件上基于透明度來創(chuàng)建形狀。比如，可以比照預(yù)期的形狀新創(chuàng)建一張圖片。但土星的圖片已經(jīng)是帶透明度的PNG格式了，因此可以直接通過它來生成形狀。我們要做的就是把shape-outside 的值由polygon()函數(shù)修改為指向該圖片的url()函數(shù)：

.fig-planet {
 float: right;
 max-width: 65%;
 shape-outside: url(img/saturn.png);
}

如果在Chrome 開發(fā)者工具里檢查這張圖片，會(huì)看到如圖6 所示的模樣。可以看到，圖片的透明度數(shù)據(jù)被用于生成形狀了。

提示：只通過瀏覽器打開HTML 文件是不行的，就算瀏覽器支持CSS Shapes 也不行。必須通過Web 服務(wù)器取得這個(gè)頁面，這樣引用的圖片才會(huì)帶有合適的HTTP 首部信息，告訴瀏覽器該圖片與CSS 來自同一個(gè)域。這種安全機(jī)制是較新的瀏覽器才有的，是為了防止引用的文件對(duì)你的計(jì)算機(jī)造成危害。

默認(rèn)情況下，形狀輪廓會(huì)沿圖片完全透明區(qū)域的邊緣生成，但這個(gè)值可以通過shape-imagethreshold 屬性來修改。默認(rèn)值是0.0（完全透明），而較大的值（最大為1.0）意味著較高的不透明度也可以用于生成形狀邊界。比如，修改土星圖片的不透明度閾值為0.9，則半透明的土星環(huán)將不再被包含在形狀內(nèi)，結(jié)果文本會(huì)覆蓋其上（見圖7）。

.fig-planet {
 float: right;
 max-width: 65%;
 shape-outside: url(img/saturn.png);
 shape-image-threshold: 0.9;
}

3. 形狀盒子與邊距

除了使用形狀函數(shù)或圖片，還可以使用元素的參照盒子來生成形狀。乍一聽好像有點(diǎn)不對(duì)，畢竟元素盒子都是方形的。不過，形狀也能依照?qǐng)A角生成。

比如，以前面的月亮圖片為例，如果我們想改變區(qū)塊背景的顏色，同時(shí)也去掉圖片周圍的黑色區(qū)域（如圖11-8 所示），那么可以在圖片上使用border-radius 來創(chuàng)建圓形。

.fig-moon {
 float: right;
 max-width: 40%;
 border-radius: 50%;
}

僅有圓角邊框還不能生成形狀，還得通過shape-outside 屬性告訴瀏覽器，以border-box作為生成形狀的依據(jù)。

.fig-moon {
 float: right;
 max-width: 40%;
 border-radius: 50%;
 shape-outside: border-box;
}

這樣外部形狀就變成了環(huán)繞元素邊框盒子的圓形。其他能生成形狀的參照盒子還有content-box、padding-box 和margin-box。margin-box 是個(gè)例外。因?yàn)樾螤钍腔诟?dòng)區(qū)域的，浮動(dòng)區(qū)域也包含外邊距，所以這個(gè)關(guān)鍵字是專門為形狀定義的，并沒有box-sizing: margin-box 這種用法。

對(duì)于形狀而言，參照盒子為margin-box 時(shí)，形狀仍然會(huì)參照?qǐng)A角邊框，但這樣一來就可以像定義常規(guī)的外邊距一樣，給月亮圖片周圍添加一些邊距了。

.fig-moon {
 float: right;
 max-width: 40%;
 border-radius: 50%;
 shape-outside: margin-box;
 margin: 2em;
}

這樣，文本會(huì)環(huán)繞著弧形的外邊距形狀排布。如果在Chrome 開發(fā)者工具中檢查圖片，可以看到此時(shí)形狀的樣子，還有原始的外邊距（見圖9）。

如果想給更復(fù)雜的土星圖片添加外邊距，可以使用另一個(gè)屬性shape-margin，這個(gè)屬性用于給整個(gè)形狀添加外邊距，與創(chuàng)建形狀的方法無關(guān)（見圖10）。

.fig-planet {
 max-width: 65%;
 shape-outside: url(img/saturn.png);
 shape-margin: 1em;
}

剪切與蒙版

CSS 形狀雖然可以影響周圍文本流，卻不允許你修改元素自身的外觀。添加圓角邊框只是視覺上改變?cè)匦螤畹囊环N方式。實(shí)際上，通過把元素的部分區(qū)域變透明，是可以影響元素自身形狀的。

剪切（clipping）使用路徑形狀定義硬邊界，可以基于該邊界完全切換元素的可見性。蒙版（masking）不太一樣，它用于將元素的某些區(qū)域設(shè)置為更透明或更不透明。剪切會(huì)影響對(duì)象的響應(yīng)區(qū)域，而蒙版不會(huì)。比如要觸發(fā)懸停，鼠標(biāo)必須移到剪切后元素的可見區(qū)域。而對(duì)于加了蒙版的元素，無論鼠標(biāo)下面的區(qū)域是否可見，只要位于該元素上，都會(huì)激活:hover 狀態(tài)。

一、剪切

剪切最早是在CSS 2.1 中通過clip 屬性引入的。但這個(gè)屬性只能應(yīng)用給絕對(duì)定位的元素，而且只能把這些元素剪切為矩形（使用rect()函數(shù)）。沒勁！

好在新的clip-path 屬性提供了更多選擇。它可以使用CSS 形狀中的基本形狀函數(shù)定義如何剪切元素。它還能使用SVG 文檔剪切元素，只要通過URL 引用一個(gè)<clipPath>元素即可。

下面從使用形狀函數(shù)定義剪切路徑開始。這個(gè)特性之前只有Blink 和WebKit 內(nèi)核的瀏覽器支持，而且除了不加前綴的屬性，還要使用加-webkit-前綴的屬性。為簡(jiǎn)單起見，后面的例子只展示不加前綴的標(biāo)準(zhǔn)屬性。

“觀星指南”頁面中的所有區(qū)塊都是被剪切過的，因此都有一些向?qū)蔷€傾斜（見圖11）。

每個(gè)區(qū)塊都有一個(gè)stacked 類，其中使用多邊形函數(shù)指定了剪切路徑：

.stacked {
 clip-path: polygon(0 3vw, 100% 0, 100% calc(100% - 3vw), 0% 100%);
}

這個(gè)多邊形沒有前面土星的多邊形復(fù)雜，因此可以稍微深入地講解一下。多邊形中的每一個(gè)點(diǎn)都對(duì)應(yīng)著一對(duì)空格分隔的值，值對(duì)之間以逗號(hào)隔開。

先從左上角開始，0 3vw 表示x 軸剪切長(zhǎng)度為0，y 軸剪切長(zhǎng)度為3vw。這里使用相對(duì)視口的單位保證角度以視口大小為參照。接下來的坐標(biāo)是右上角坐標(biāo)100% 0。第三個(gè)100% calc(100% -3vw)指距右下角3vw，它不能使用百分比表示，因?yàn)檫@個(gè)y 軸坐標(biāo)是從上方開始計(jì)算的。最后，左下角的坐標(biāo)是0 100%。

因?yàn)榧羟新窂街挥绊懺劁秩竞蟮耐庥^，而不會(huì)影響頁面流，所以剪切后的元素之間會(huì)出現(xiàn)透明間隙（見圖11-12）。為消除間隙，可以給每個(gè)堆疊的區(qū)塊應(yīng)用一個(gè)負(fù)外邊距，而且要比3vm稍大一些，好讓相鄰的區(qū)塊邊緣能彼此重疊。但我們只希望在支持clip-path 的瀏覽器中應(yīng)用這個(gè)負(fù)外邊距，這時(shí)候正好可以用上@supports 規(guī)則。因?yàn)檫@些新的特效只在較新的瀏覽器中才存在，所以我們可以放心地這么寫：

@supports ((clip-path: polygon(0 0)) or
 (-webkit-clip-path: polygon(0 0))) {
 .stacked {
 margin-bottom: -3.4vw;
 }
}

在@supports 規(guī)則塊中，我們測(cè)試了瀏覽器是否支持最小的多邊形（只有一個(gè)點(diǎn)）。增加這些保障后，區(qū)塊就可以完美地對(duì)齊了。而在不支持clip-path 的瀏覽器中，區(qū)塊也會(huì)像平常一樣上下相接，不會(huì)重疊。

使用SVG

可以使用polygon()、circle()、ellipse()和inset() 函數(shù)創(chuàng)建剪切路徑，與創(chuàng)建CSS形狀一樣。對(duì)于復(fù)雜的形狀，建議大家還是使用圖片編輯器來創(chuàng)建，然后再將最終的圖形作為剪切路徑的源。我們?cè)陧撁鎸?dǎo)航中使用的形狀就是這樣生成的，如圖13 所示。

使用圖形作為剪切源，需要先使用SVG 創(chuàng)建剪切路徑，然后再通過一個(gè)URL 引用到形狀函數(shù)中。首先，要在Illustrator、Sketch 或Inkscape 之類的圖形編輯器中創(chuàng)建想要的形狀。雖然不那么簡(jiǎn)單，但還是可行的。

導(dǎo)航區(qū)塊本身是一個(gè)包含頁內(nèi)鏈接的無序列表：

<nav class="stacked section nav-section inverted">
 <ul class="wrapper">
 <li><a href="#moon">The Moon</a></li>
 <li><a href="#sun">The Sun</a></li>
 <li><a href="#planets">Planets</a></li>
 <li><a href="#milky-way">Galaxy</a></li>
 <li><a href="#universe">Universe</a></li>
 </ul>
</nav>

在此，我們就不涉及導(dǎo)航本身的樣式了，大家只要知道這里用到了Flexbox 水平布局導(dǎo)航項(xiàng)目，將它們固定為100 像素見方的方塊就夠了。

然后，在支持SVG 的圖形編輯器（我們用的是Adobe Illustrator）中創(chuàng)建一張圖片。圖片的大小也是100 像素見方（見圖14）。其中的星球由兩個(gè)黑色的形狀構(gòu)成，一個(gè)圓形和一個(gè)旋轉(zhuǎn)后的橢圓形。接著把這個(gè)圖片保存為SVG 格式，命名為clip.svg。保存過程因編輯器而異，這里

就不說了，我們只關(guān)注大體的流程。

下面在代碼編輯器中打開生成的SVG 文件，看上去大概是這樣的：

<svg xmlns=http://www.w3.org/2000/svg width="100px" height="100px" viewBox="0 0 100 100">
 <circle cx="50" cy="50" r="45"/>
 <ellipse transform="matrix(-0.7553 0.6554 -0.6554 -0.7553 -12.053 54.99)" cx="50" cy="50"
rx="63.9" ry="12.8"/>
</svg>

為了把這個(gè)圖片轉(zhuǎn)換為剪切路徑，需要把其內(nèi)容包裝在一個(gè)<clipPath>元素中，并添加一個(gè)ID 屬性：

<svg xmlns="SVG namespace"
 width="100px" height="100px" viewBox="0 0 100 100">
 <clipPath id="saturnclip">
 <circle cx="50" cy="50" r="40.1"/>
 <ellipse transform="matrix(0.7084 -0.7058 0.7058 0.7084 -20.7106 49.8733)" cx="50"
 cy="50" rx="62.9" ry="12.8"/>
 </clipPath>
</svg>

最后，就可以在CSS 中引用clip.svg 中的這個(gè)剪切路徑了：

.nav-section [href="#planets"] {
 clip-path: url(img/clip.svg#saturnclip);
}

這樣就可以把多個(gè)剪切源保存在一個(gè)SVG 文件中，然后通過URL 的片段ID 分別引用。

二、蒙版

“觀星指南”頁面的標(biāo)題好像半隱于地球大氣層的后面（見圖15）。這種透明漸隱效果是通過蒙版實(shí)現(xiàn)的。

Safari 早在2008 年就實(shí)現(xiàn)了蒙版，使用的是非標(biāo)準(zhǔn)屬性-webkit-mask-image。這個(gè)屬性允許指定一張圖片，并以這張圖片作為加蒙版元素透明度層次的來源。作為蒙版的圖片中，每個(gè)像素都有一個(gè)阿爾法級(jí)別（alpha level），也就是透明度。如果蒙版圖片中的像素是透明的，那么加蒙版元素中對(duì)應(yīng)的像素也不可見。相反，蒙版圖片中完全不透明的區(qū)域，對(duì)應(yīng)的加蒙版元素的區(qū)域也會(huì)完全可見。蒙版圖片的顏色與此無關(guān)，因此灰度圖常用作蒙版。

除了圖片，還可以使用CSS 漸變來創(chuàng)建蒙版。頁面標(biāo)題的蒙版效果就是這么做的：

.header-title {
 mask-image: radial-gradient(ellipse 90% 30% at 50% 50%,
 rgba(0,0,0,0) 45%,
 #000 70%);
 mask-size: 100% 200%;
}

相信大家都了解這個(gè)語法：mask-image 后面的值非常類似background-image 屬性的值，甚至也可以聲明多個(gè)蒙版。

除了指定蒙版圖片，還可以指定蒙版的大小和位置。對(duì)于我們這個(gè)例子而言，為了把蒙版放到文本底部，我們將它的高度聲明為兩倍，而沒有使用定位。如果我們?cè)谶@里簡(jiǎn)單地把漸變圖片移動(dòng)到下面，那么蒙版圖片的上半部分就會(huì)是透明的，結(jié)果就是文本的上半部分不可見。圖16展示了漸變蒙版的大小和位置，以及它與文本的相對(duì)位置關(guān)系。

在WebKit 最初實(shí)現(xiàn)的基礎(chǔ)上，蒙版相關(guān)的屬性得以標(biāo)準(zhǔn)化和擴(kuò)展，同時(shí)也支持了對(duì)應(yīng)的SVG效果。沒錯(cuò)，就像clip-path 一樣，SVG 中的蒙板也可以應(yīng)用給HTML 內(nèi)容。

.header-title {
 /*嵌入頁面中的CSS，指向嵌入同一頁面中的SVG <mask>元素*/
 mask: url(#ellipseMask);
}
與前面CSS 漸變等價(jià)的SVG 標(biāo)記如下：
<mask id="ellipseMask" maskUnits="objectBoundingBox" maskContentUnits="objectBoundingBox">
 <radialGradient id="radialfill" r="0.9" cy="1.1">
 <stop offset="45%" stop-color="#000"/>
 <stop offset="70%" stop-color="#fff"/>
 </radialGradient>
</mask>

與剪切路徑一樣，這里也需要使用objectBoundingBox 坐標(biāo)系，按照0~1 的比例尺將蒙版縮放到與元素邊界匹配。SVG 蒙版元素本身還有一個(gè)maskContentUnits 屬性，這里也將其設(shè)置為與蒙版形狀相同的坐標(biāo)系。

SVG 蒙版源使用明度值（luminance）而非阿爾法級(jí)別來應(yīng)用蒙版。這意味著蒙版較暗的區(qū)域?qū)?yīng)的加蒙版元素區(qū)域會(huì)較透明，而蒙版較亮的區(qū)域?qū)?yīng)的加蒙版元素區(qū)域會(huì)較不透明。在前面SVG 蒙版的例子中，我們使用了黑白漸變。

瀏覽器會(huì)在你使用蒙版圖片時(shí)使用阿爾法級(jí)別，在你使用SVG 蒙版時(shí)使用明度值。在對(duì)標(biāo)準(zhǔn)的建議中，有一個(gè)mask-type 屬性可以切換這個(gè)應(yīng)用蒙版的依據(jù)值。

另外，-webkit-前綴版與建議的標(biāo)準(zhǔn)版屬性之間也有一些差異。可以參考MDN 中WebKit實(shí)現(xiàn)的完整屬性和語法。

——

本文很大程度上跳出了沉悶單調(diào)的頁面盒子世界。我們探討了如何通過CSS 形狀美化頁面中的元素，以及如何通過剪切路徑畫出視覺邊界。使用蒙版則可以進(jìn)一步控制界面中元素的可見性。

通過這些特效的學(xué)習(xí)，我們也看到了SVG 與CSS 結(jié)合的威力，也極大擴(kuò)展了我們未來設(shè)計(jì)的想象空間。

——本文節(jié)選自《精通CSS：高級(jí)Web標(biāo)準(zhǔn)解決方案（第3版）》

CSS作為Web標(biāo)準(zhǔn)的一部分，是現(xiàn)代網(wǎng)頁設(shè)計(jì)中必不可少的關(guān)鍵元素。鑒于CSS標(biāo)準(zhǔn)化的快速發(fā)展，想要成為CSS高手，打造出令人驚艷、辨識(shí)度高的網(wǎng)站，就必須充分了解當(dāng)前CSS規(guī)范各模塊的新特性、新技術(shù)和新思想。

本書是經(jīng)典CSS參考指南，自第1版出版至今一直暢銷不衰。第3版針對(duì)當(dāng)前瀏覽器支持度足夠好的CSS特性全面改寫，著眼于如何為更大、更復(fù)雜的網(wǎng)站編寫優(yōu)雅、巧妙、易維護(hù)的代碼。兩位作者均是技術(shù)與寫作才能俱佳的開發(fā)高手，他們將自己對(duì)現(xiàn)代CSS實(shí)踐的深刻理解融入書中，結(jié)合大量復(fù)雜實(shí)現(xiàn)情景，清晰展示了如何利用新技術(shù)寫出高度靈活、易維護(hù)和可擴(kuò)展的代碼，并讓這些代碼在不同瀏覽器和不同平臺(tái)上跑起來。

第1章　基礎(chǔ)知識(shí)

第2章　添加樣式

第3章　可見格式化模型

第4章　網(wǎng)頁排版

第5章　漂亮的盒子

第6章　內(nèi)容布局

第7章　頁面布局與網(wǎng)格

第8章　響應(yīng)式Web設(shè)計(jì)與CSS

第9章　表單與數(shù)據(jù)表

第10章　變換、過渡與動(dòng)畫

第11章　高級(jí)特效

第12章　品控與流程