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