> 原文出處：https://github.com/cssmagic/blog/issues/54
接下來，要向大家介紹一件最近讓我非常高興的事情。我相信它也會是所有 CSS 開發者歡欣鼓舞的一件事。
[](https://box.kancloud.cn/2015-09-11_55f26a55dc8b6.jpg)
是關于一本書的。
我對這本書的評價是這樣的：
[](https://box.kancloud.cn/2015-09-11_55f26a5e4d63a.jpg)
說到 CSS 圖書，問題來了。
[](https://box.kancloud.cn/2015-09-11_55f26a6268538.jpg)
如果你的書架只能放得下三本 CSS 書，我會推薦哪三本呢？
[](https://box.kancloud.cn/2015-09-11_55f26a6640c5b.jpg)
第一本，《CSS 權威指南》。
這是一本非常經典的 CSS 參考書，它的經典之處在于，它用普通人類可以理解的語言系統、全面地講解了 CSS 規范。這本書會告訴你，CSS 是什么、CSS 有什么、CSS 可以做什么。
這本書的最新版本——第三版——的英文版出版于 2006 年。
[](https://box.kancloud.cn/2015-09-11_55f26a68021f8.jpg)
第二本書，《精通 CSS》。這同樣是一本非常經典的 CSS 圖書，它側重于實踐，告訴你如何正確地使用 CSS。（封面圖片采用了大家比較容易買到的中文版第二版。）
這本書的英文原版第一版出版于 2006 年。
大家可能注意到了，這兩本都出版于 2006 年。而今年已經是 2015 年了。
[](https://box.kancloud.cn/2015-09-11_55f26a6941519.jpg)
近十年來，我一直在等待第三本重量級 CSS 圖書的出現。
終于，它來了：
[](https://box.kancloud.cn/2015-09-11_55f26a69c89b8.jpg)
這本書叫《CSS Secrets》，6 月份剛剛出版。（這本書的中文名還沒有正式確定，封面圖片暫采用英文原版。）
我們先來看看它的作者：
[](https://box.kancloud.cn/2015-09-11_55f26a6b4759d.jpg)
作者叫 Lea Verou，她是一位資深 Web 開發者，有著豐富的實踐經驗。更重要的是，她是 W3C CSS 工作組的特邀專家——CSS 工作組匯集了這個領域內的專家，他們是制定 CSS 規范、設計 CSS 這門語言的一群人——全球只有極少數頂尖的開發者才有機會獲邀加入 CSS 工作組。
國內開發者親切地稱呼她為 “CSS 一姐”。
那這本書到底好在哪里呢？
[](https://box.kancloud.cn/2015-09-11_55f26a6bb969e.jpg)
（此處略去兩百字）
[](https://box.kancloud.cn/2015-09-11_55f26a6c76750.jpg)
對 CSS 初學者來說，我強烈建議先去讀前面兩本書，因為讀這本書還是需要有一定的基礎的。如果實在等不及，可以把它當作 cookbook 來解決你迫在眉睫的問題。
對于中級的 CSS 開發者來說，這本書可以發揮最大的功效——它可以幫助你進階。相信很多開發者在學習 CSS 到了一定階段的時候，感覺自己好像什么都會了，但遇到復雜問題時往往又感覺捉襟見肘、力不從心。這就是遇到瓶頸了。如何突破瓶頸、進入下一個階段？要做的無非是兩件事——實踐和思考。書并不能代替你思考，但一本好書可以向你示范，什么樣的思考方式是正確的。
如果你已經是一位 CSS 專家了，已經有些飄飄然了，那這本書可以告訴你和這個星球上最頂尖的 CSS 專家的差距在哪里，從而幫助你找到人生下一階段的目標和動力。
說了這么多，大家心里可能會想：你吹得挺玄乎，能不能舉個書里面的例子來看一看？
[](https://box.kancloud.cn/2015-09-11_55f26a6e099c6.jpg)
好，我們來看個例子。
在這里我要強調一下，因為時間關系，我在這里引用的只是一個非常淺顯的案例。書中的絕大多數案例都要比它復雜。
這個例子是這樣的：
[](https://box.kancloud.cn/2015-09-11_55f26a6f04b41.jpg)
對于邊框我們都非常熟悉了。邊框是我們美化網頁、增強樣式最常用的手段之一。
[](https://box.kancloud.cn/2015-09-11_55f26a6fa1981.png)
有些時候，我們的需求是給一個容器加上多重邊框：
[](https://box.kancloud.cn/2015-09-11_55f26a700070f.png)
對于這個需求，我們最容易想到的就是給它再加一層標簽：
[](https://box.kancloud.cn/2015-09-11_55f26a707d258.png)
不過有些時候，我們可能無法修改結構，或者修改結構的成本很高，此時就需要我們在純 CSS 層面解決這個問題。
說到邊框，首先我們可能會聯想到?`outline`?屬性。
[](https://box.kancloud.cn/2015-09-11_55f26a71c61a7.png)
我們暫且把?`outline`?稱作 “描邊”。描邊屬性跟邊框有很多相似之處，但由于早期的 IE 并不支持，了解它的人可能沒有那么多。描邊是繪制在邊框的外圈的，因此，通過?`outline`?屬性我們就可以很容易地實現雙層邊框了。
描邊有一個好處在于，它跟邊框類似，可以設置各種線型，比如虛線：
[](https://box.kancloud.cn/2015-09-11_55f26a733fa71.png)
而且更好玩的是，還有一個?`outline-offset`?屬性，可以控制描邊的偏移量。
[](https://box.kancloud.cn/2015-09-11_55f26a74b75d9.png)
我們可以把這層描邊擴展出去：
[](https://box.kancloud.cn/2015-09-11_55f26a7e720fc.png)
這個屬性甚至還可以接受負值。如果是負值，描邊會向內收縮，并疊加在邊框之上：
[](https://box.kancloud.cn/2015-09-11_55f26a7fbb577.png)
利用這個特性可以玩出很多好玩的效果。
不過描邊有一個缺陷——如果這個容器本身有圓角的話，描邊并不能完全貼合圓角。目前所有瀏覽器的行為都是這樣的：
[](https://box.kancloud.cn/2015-09-11_55f26a82931ac.png)
所以，如果你需要圓角，就要另尋它法了。
于是接下來，我們又想到了投影這個屬性。
[](https://box.kancloud.cn/2015-09-11_55f26a840744f.png)
相信大家都用過投影，它可以讓我們的網站更具立體感和層次感。
我們通常是這樣設置投影的：
[](https://box.kancloud.cn/2015-09-11_55f26a930cbaa.png)
前面三個長度值，再加一個顏色值。
前兩個長度值分別表示投影在水平和垂直方向上的偏移量，第三個長度值表示投影的模糊半徑（也就是模糊的程度）；顏色值就是投影的顏色。
如果我們把前三個值都設為零，實際上是沒有任何效果的。因為如果投影即不偏移也不模糊，剛好會被這個元素自己嚴嚴實實地遮住。
很多人可能不知道的是，投影還可以有第四個長度值。這個值表示投影向外擴張的程度：
[](https://box.kancloud.cn/2015-09-11_55f26a93650f9.png)
這樣，投影就會從元素的底下露出一圈了。
關于投影，另外一個不是每個人都知道的特性是，投影屬性其實可以接受一個列表，我們可以一次賦予它多層投影，像這樣：
[](https://box.kancloud.cn/2015-09-11_55f26a93d368c.png)
這樣我們就得到了超過兩層的 “邊框” 效果了。
投影的另外一個好處是，它的擴張效果是根據元素自己的形狀來的。如果元素是矩形，它擴張開來就是一個更大的矩形；如果元素有圓角，它也會擴張出圓角。
[](https://box.kancloud.cn/2015-09-11_55f26a9431759.png)
所以對于圓角的場景，它也不在話下。
[](https://box.kancloud.cn/2015-09-11_55f26a9990f75.png)
這兩種方法還有什么需要注意的地方？這本書也很貼心地注明了。
由于描邊和投影都是不影響布局的，所以如果這個元素和其它元素的相對位置關系很重要，就需要我們以外邊距等方式來為這些多出來的 “邊框” 騰出位置，以防被其它元素蓋住。
因此，從這個意義上來說，使用內嵌投影似乎是更好的選擇。因為內嵌投影讓投影出現在元素內部，我們可以用內邊距在元素的內部消化掉這些額外 “邊框” 所需要的空間，處理起來更容易一些。
[](https://box.kancloud.cn/2015-09-11_55f26a9a0f888.jpg)
好的，這個例子就講完了。
（掌聲。）
講到這里，我看到有些同學一臉意猶未盡的表情，你們的心情可能是這樣的：
[](https://box.kancloud.cn/2015-09-11_55f26a9a81bc1.jpg)
OK，再來一個。
這個例子并不是書中直接提到的，而是我在讀這本書的過程中，受它啟發，再結合自己的實踐所想到的，這里拿出來跟大家分享。
這個案例叫做：
[](https://box.kancloud.cn/2015-09-11_55f26a9aeeb7a.jpg)
什么叫 “圓潤的標簽頁” 呢？
標簽頁我們都很熟悉了，它是一種常用的 UI 元素。
[](https://box.kancloud.cn/2015-09-11_55f26a9b8c758.png)
我們把它拉近來看一看：
[](https://box.kancloud.cn/2015-09-11_55f26a9bd5311.png)
這個標簽還是比較美觀的，我們用圓角讓它看起來很接近真實的標簽造型。不過我們也注意到，它底部的兩個直角看起來似乎有點生硬。
所以設計師原本期望的效果可能是這樣的：
[](https://box.kancloud.cn/2015-09-11_55f26a9c34891.png)
這樣就自然多了。但這看起來似乎很難實現啊！
我們的難點主要在這里：
[](https://box.kancloud.cn/2015-09-11_55f26aa7dee93.png)
這個特殊的形狀如何實現？
我們把它放大來看一下：
[](https://box.kancloud.cn/2015-09-11_55f26ab1df64b.png)
首先我們可能會想到用圖片。這當然是可行的，但圖片有種種局限，我們最好還是完全用 CSS 來實現它。
好，接下來我們來分析一下它的形狀。它其實就是一個方形，再挖掉一個 90° 的扇形。于是我們試著創建一個方形，再用背景色做出一個扇形疊加上去：
[](https://box.kancloud.cn/2015-09-11_55f26ab364964.png)
看起來好像可以了。但這是騙人的啊！
把它放在復雜背景下，立馬就露餡了——扇形部分不是透明的：
[](https://box.kancloud.cn/2015-09-11_55f26ab3d4b58.png)
所以，我們的問題就變成了：
[](https://box.kancloud.cn/2015-09-11_55f26ab93043b.jpg)
對于普通外凸的圓角，我們都已經非常熟悉了：
[](https://box.kancloud.cn/2015-09-11_55f26aba305a1.png)
我們用圓角屬性就可以得到：
[](https://box.kancloud.cn/2015-09-11_55f26abaa3a37.png)
但我們需要的是一個內凹的圓角形狀。
這是一個實實在在的需求，于是有開發者曾經提議，擴展圓角屬性，讓它支持負值。如果是負值，圓角就不再是外凸的，而是內凹的。這個提議聽起來似乎很有道理，語法設計也很緊湊。
[](https://box.kancloud.cn/2015-09-11_55f26abaf0dc4.png)
但實際上它的語義不夠準確。因此 CSS 工作組并沒有接受這個提議，并未將它納入標準。
[](https://box.kancloud.cn/2015-09-11_55f26abb46c8c.png)
這條路走不通，我們還需要繼續探索。
我們順著這個方向，頭腦中很自然地會迸出這個疑問：
[](https://box.kancloud.cn/2015-09-11_55f26abbc7a15.jpg)
答案當然是有的：
[](https://box.kancloud.cn/2015-09-11_55f26abc79fd8.jpg)
“徑向漸變” 特性就是跟圓形有關的。
不過它稍稍有些復雜。在講解徑向漸變之前，我們先來看一看比較簡單的 “線性漸變”。
[](https://box.kancloud.cn/2015-09-11_55f26abdb6387.png)
說到漸變，那自然需要有一個容器。然后，還需要有兩種顏色。漸變的顏色設置我們稱之為 “色標”——每個色標不僅有顏色信息，還有位置信息。
我們給起點和終點的色標分別設置顏色，就可以得到一條漸變圖案：
[](https://box.kancloud.cn/2015-09-11_55f26abe3743f.png)
我在這里使用了綠色來展示這個漸變，大家可能會覺得綠色很難看。實際上這是有意安排的——由于人眼對綠色的亮度變化是最為敏感的，這里使用綠色是為了讓大家看得更清楚，而不是我的審美出了問題。（笑聲。）
接下來，關于漸變，我們其實可以設置不止兩個色標。比如我們可以在中央再增加一個色標。請注意我們特意選擇了跟起點色標一樣的顏色。我們得到的效果如下：
[](https://box.kancloud.cn/2015-09-11_55f26abe854c0.png)
我們發現，漸變只發生在顏色不同的色標之間。如果兩個色標的顏色相同，則它們之間會顯示為一塊實色。
好的，我們繼續增加色標。這次我們在漸變地帶的中央增加一個色標，且讓它的顏色和終點色標相同：
[](https://box.kancloud.cn/2015-09-11_55f26abed8274.png)
根據上面的經驗，這個結果正是我們所預料的——漸變只發生在顏色不同的色標之間。
接下來，我們玩點更特別的，我們把中間的兩個色標相互靠近直至重合，會發生什么？
[](https://box.kancloud.cn/2015-09-11_55f26abf51dcf.png)
實際上這個漸變也會趨向于零。也就是說，雖然這本質上仍然是一個 “漸變” 圖案，但經過我們的精心設計之后，我們最終得到了兩個純色的色塊條紋。
如果我們把終點顏色換為透明色……
[](https://box.kancloud.cn/2015-09-11_55f26ac4d5636.png)
我們甚至還會得到實色和透明色間隔的條紋。
好的，接下來我們來看徑向漸變。它稍稍有些復雜，但原理是一樣的。
同樣，我們需要有一個容器。但對徑向漸變來說，顧名思議，所有色標是排布在一條半徑上的。也就是說，我們還需要有一個圓心。默認情況下，圓心就是這個容器的正中心：
[](https://box.kancloud.cn/2015-09-11_55f26ac54f137.png)
而這條半徑就是圓心指向容器最遠端的一條假想的線：
[](https://box.kancloud.cn/2015-09-11_55f26ac5979ad.png)
接下來，我們要設置一些色標：
[](https://box.kancloud.cn/2015-09-11_55f26ac6202ff.png)
說到這里，就要講解一下徑向漸變的特別之處。所有色標的顏色變化推進不是像線性漸變那樣平行推進的，而是以同心圓的方式向外擴散的——就像水池里被石子激起的漣漪那樣。
看到這個色標的分布，我們應該可以想像出線性漸變的結果是什么；但這里我們把它按照徑向漸變的特征來推演一下，實際上最終的效果是這樣的：
[](https://box.kancloud.cn/2015-09-11_55f26ac66e3c7.png)
我們把所有輔助性的標記都去掉，只留下漸變圖案：
[](https://box.kancloud.cn/2015-09-11_55f26ac6db5b0.png)
這是一個穿了個窟窿的實色背景。很好玩是吧？不過不要忘了我們是為什么來到這兒的——我們是為了得到一個內凹圓角的形狀。
細心的朋友可能已經發現了，我們需要的東西已經出現了：
[](https://box.kancloud.cn/2015-09-11_55f26ac754af2.png)
接下來，我們調整一下圓心的位置和容器的尺寸，就可以得到這個內凹圓角的造型了。
[](https://box.kancloud.cn/2015-09-11_55f26ac7a2b3c.png)
利用這個技巧，我們用純 CSS 最終實現了這個看似不可能的 “圓潤的標簽頁” 效果！
[](https://box.kancloud.cn/2015-09-11_55f26a9c34891.png)
（掌聲。）
[](https://box.kancloud.cn/2015-09-11_55f26ac89da0e.jpg)
好的，我們來回顧一下今天分享的主要內容：
[](https://box.kancloud.cn/2015-09-11_55f26ac9560eb.jpg)
（現場的分享到這里就結束了。以下是因為時間關系被剪掉的片斷。）
[](https://box.kancloud.cn/2015-09-11_55f26acb8f5e1.jpg)
關于《CSS Secrets》這本書，大家可能會有一個問題：
這本書有中文版嗎？
[](https://box.kancloud.cn/2015-09-11_55f26ad8a1552.jpg)
這本書已經由國內頂尖的計算機圖書公司 “圖靈文化” 引進；同時，我本人也很榮幸爭取到了這本書的中文版翻譯權。
[](https://box.kancloud.cn/2015-09-11_55f26ad9316aa.jpg)
在最理想的情況下，這本書的中文版在年內就可以在各大書店上架。當然，電子版會更快，圖靈官網最快本月內就會發布免費試讀章節。
在翻譯這本書的過程中，我有很多想要補充的內容，但限于篇幅，不可能在原書中插入過多的譯注。因此，我萌生了一個想法——為這本書寫注解。
[](https://box.kancloud.cn/2015-09-11_55f26adf096fe.jpg)
萌生這個想法有兩個原因：
一方面，這本書不適合初學者閱讀，書中的很多難點都一筆帶過了，而這些難點往往是值得展開討論的。
另一方面，書中提供的解決方案以標準為導向，極少涉及瀏覽器的私有屬性。部分解決方案所采用的 CSS 特性太新，以致于在眼下還沒有瀏覽器很好地實現。而實際上有些非標準的解決方案已經比較成熟了，在特定場景下往往會發揮更好的作用。我認為有必要提供這些知識，以供國內的開發者們參考。
[](https://box.kancloud.cn/2015-09-11_55f26adf86fcf.jpg)
在翻譯完這本書之后，我一定會寫。寫多少字、什么時候寫完，現在還不確定，但我在這里可以承諾的是，我一定會寫。
而且，我會以免費、開源的方式來完成這個計劃。原書是需要大家自己購買的，但我寫的這份注解一定會在 GitHub 上免費發布！
（此處可能有掌聲。）
[](https://box.kancloud.cn/2015-09-11_55f26ae04332f.jpg)
我今天的分享到這里就結束了，大家有問題嗎？
