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

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

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

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

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

今天，這些效果已經能夠在很多瀏覽器中通過CSS 來呈現了，即使做不到也能平穩地退化為可用版本。在一個頁面上集成大量視覺特效仍須謹慎，因為可能造成性能開銷，代價有大有小。

盡管如此，通過CSS 來完成它們仍然有很多好處，因為可以減少不必要的標記，而且維護起來比較容易。此外，隨著瀏覽器支持相應的規范，性能也會越來越好。

接下來，我們就以這個“觀星指南”頁面作為例子，逐個講解其中涉及的技術點。

CSS Shapes

大家可能都知道，網頁布局基本上都是由矩形構成的，CSS Shapes 是一個新標準，旨在讓Web 設計者能使用各種形狀。形狀元素不僅會影響界面的外觀，還會影響頁面的內容流。

細說形狀

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

這兩種形狀分別由不同級別的CSS Shapes 規范定義。其中shape-outside 屬性（在CSS Shapes Level 1 中定義）是唯一相對比較成熟的。本文不涉及shape-inside，因為目前還沒有瀏覽器實現它，也許在不久的將來會有吧。

shape-outside 屬性只能應用給浮動元素。這個屬性不改變元素自身的外觀，只會通過設置形狀影響其外部內容流。

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

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

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

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

1. 形狀函數

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

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

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

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

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

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

相對復雜一些的是polygon()函數。這個函數接受一系列坐標對，用于在盒子表面指定多個點，坐標相對于盒子的左上角，最終把各個點連接起來就是要創建的形狀。在“Planets”部分，我們為土星創建了一個多邊形。

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

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

.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%);
}

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

2. 形狀圖片

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

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

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

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

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

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

3. 形狀盒子與邊距

除了使用形狀函數或圖片，還可以使用元素的參照盒子來生成形狀。乍一聽好像有點不對，畢竟元素盒子都是方形的。不過，形狀也能依照圓角生成。

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

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

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

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

這樣外部形狀就變成了環繞元素邊框盒子的圓形。其他能生成形狀的參照盒子還有content-box、padding-box 和margin-box。margin-box 是個例外。因為形狀是基于浮動區域的，浮動區域也包含外邊距，所以這個關鍵字是專門為形狀定義的，并沒有box-sizing: margin-box 這種用法。

對于形狀而言，參照盒子為margin-box 時，形狀仍然會參照圓角邊框，但這樣一來就可以像定義常規的外邊距一樣，給月亮圖片周圍添加一些邊距了。

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

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

如果想給更復雜的土星圖片添加外邊距，可以使用另一個屬性shape-margin，這個屬性用于給整個形狀添加外邊距，與創建形狀的方法無關（見圖10）。

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

剪切與蒙版

CSS 形狀雖然可以影響周圍文本流，卻不允許你修改元素自身的外觀。添加圓角邊框只是視覺上改變元素形狀的一種方式。實際上，通過把元素的部分區域變透明，是可以影響元素自身形狀的。

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

一、剪切

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

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

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

“觀星指南”頁面中的所有區塊都是被剪切過的，因此都有一些向對角線傾斜（見圖11）。

每個區塊都有一個stacked 類，其中使用多邊形函數指定了剪切路徑：

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

這個多邊形沒有前面土星的多邊形復雜，因此可以稍微深入地講解一下。多邊形中的每一個點都對應著一對空格分隔的值，值對之間以逗號隔開。

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

因為剪切路徑只影響元素渲染后的外觀，而不會影響頁面流，所以剪切后的元素之間會出現透明間隙（見圖11-12）。為消除間隙，可以給每個堆疊的區塊應用一個負外邊距，而且要比3vm稍大一些，好讓相鄰的區塊邊緣能彼此重疊。但我們只希望在支持clip-path 的瀏覽器中應用這個負外邊距，這時候正好可以用上@supports 規則。因為這些新的特效只在較新的瀏覽器中才存在，所以我們可以放心地這么寫：

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

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

使用SVG

可以使用polygon()、circle()、ellipse()和inset() 函數創建剪切路徑，與創建CSS形狀一樣。對于復雜的形狀，建議大家還是使用圖片編輯器來創建，然后再將最終的圖形作為剪切路徑的源。我們在頁面導航中使用的形狀就是這樣生成的，如圖13 所示。

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

導航區塊本身是一個包含頁內鏈接的無序列表：

<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>

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

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

就不說了，我們只關注大體的流程。

下面在代碼編輯器中打開生成的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>

為了把這個圖片轉換為剪切路徑，需要把其內容包裝在一個<clipPath>元素中，并添加一個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 中的這個剪切路徑了：

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

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

二、蒙版

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

Safari 早在2008 年就實現了蒙版，使用的是非標準屬性-webkit-mask-image。這個屬性允許指定一張圖片，并以這張圖片作為加蒙版元素透明度層次的來源。作為蒙版的圖片中，每個像素都有一個阿爾法級別（alpha level），也就是透明度。如果蒙版圖片中的像素是透明的，那么加蒙版元素中對應的像素也不可見。相反，蒙版圖片中完全不透明的區域，對應的加蒙版元素的區域也會完全可見。蒙版圖片的顏色與此無關，因此灰度圖常用作蒙版。

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

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

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

除了指定蒙版圖片，還可以指定蒙版的大小和位置。對于我們這個例子而言，為了把蒙版放到文本底部，我們將它的高度聲明為兩倍，而沒有使用定位。如果我們在這里簡單地把漸變圖片移動到下面，那么蒙版圖片的上半部分就會是透明的，結果就是文本的上半部分不可見。圖16展示了漸變蒙版的大小和位置，以及它與文本的相對位置關系。

在WebKit 最初實現的基礎上，蒙版相關的屬性得以標準化和擴展，同時也支持了對應的SVG效果。沒錯，就像clip-path 一樣，SVG 中的蒙板也可以應用給HTML 內容。

.header-title {
 /*嵌入頁面中的CSS，指向嵌入同一頁面中的SVG <mask>元素*/
 mask: url(#ellipseMask);
}
與前面CSS 漸變等價的SVG 標記如下：
<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 坐標系，按照0~1 的比例尺將蒙版縮放到與元素邊界匹配。SVG 蒙版元素本身還有一個maskContentUnits 屬性，這里也將其設置為與蒙版形狀相同的坐標系。

SVG 蒙版源使用明度值（luminance）而非阿爾法級別來應用蒙版。這意味著蒙版較暗的區域對應的加蒙版元素區域會較透明，而蒙版較亮的區域對應的加蒙版元素區域會較不透明。在前面SVG 蒙版的例子中，我們使用了黑白漸變。

瀏覽器會在你使用蒙版圖片時使用阿爾法級別，在你使用SVG 蒙版時使用明度值。在對標準的建議中，有一個mask-type 屬性可以切換這個應用蒙版的依據值。

另外，-webkit-前綴版與建議的標準版屬性之間也有一些差異。可以參考MDN 中WebKit實現的完整屬性和語法。

——

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

通過這些特效的學習，我們也看到了SVG 與CSS 結合的威力，也極大擴展了我們未來設計的想象空間。

——本文節選自《精通CSS：高級Web標準解決方案（第3版）》

CSS作為Web標準的一部分，是現代網頁設計中必不可少的關鍵元素。鑒于CSS標準化的快速發展，想要成為CSS高手，打造出令人驚艷、辨識度高的網站，就必須充分了解當前CSS規范各模塊的新特性、新技術和新思想。

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

第1章　基礎知識

第2章　添加樣式

第3章　可見格式化模型

第4章　網頁排版

第5章　漂亮的盒子

第6章　內容布局

第7章　頁面布局與網格

第8章　響應式Web設計與CSS

第9章　表單與數據表

第10章　變換、過渡與動畫

第11章　高級特效

第12章　品控與流程