用 CSS 畫鬍子

摘要： 今天的程式碼以Css3 為基礎來演示。閒話少說，直接畫。 先建立一個 index.html 檔案，引用 style.css 樣式單，主要工作在 style.css 中完成。定義一個 div 給他類為 mustache。 圖 CSS 想必大家都...

今天的程式碼以Css3 為基礎來演示。閒話少說，直接畫。

先建立一個 index.html 檔案，引用 style.css 樣式單，主要工作在 style.css 中完成。定義一個 div 給他類為 mustache。

CSS 想必大家都很熟吧。但可能程式碼中的 currentColor 對於大家會有點陌生，這裡的 currentColor = color 。currentColor 的顏色值就是當前元素的顏色值 black。currentColor 會隨之變化。

需要 CSS 中的 shadow 實現機制有所瞭解，CSS 提供 shadow 功能，我們可以活用一個功能來做一些 magic 的事 。大家有時間可以下功夫好好研究一下。功能強大，這裡給 shadow 的模糊和擴散給 0，之所以給 0 就是讓 shadow 邊緣尖銳，看效果。

我們這裡需要給元素一個絕對位置，然後給 shadow 一個較大的偏移量，這樣 shadow 就脫離真身，成為真身的替身。

再畫一個圓，同一元素支援多個 shadow 。我們就再來繪製一個 shadow 給這個 shadow 不同於前一個的偏移量。

我都看兩個 shadow, 然後可以隱藏 div 真身 ，只留下他的 shadow，在拿出來 border 這裡利器，這都是 css 的祕密武器。還有就是 before 和 after 這兩個偽元素，也是經常用到的CSS 功能。

每個圖形都有通過 before 來繪製出一個元素，我們給他的內容為空 content ,然後給一個大大的底邊。

最後用一些radius 做一些 magic 的事，我想最初設計 CSS 人，也沒想到開發人員今天把他玩如此的心應手，做出如此 magic 的事。

通過給背景一個顏色，以便觀察鬍子個個部分之間的關係。

圓角也會影響到邊框，這是本次分享的難點，希望大家能理解，如果不理解可以自己寫幾個小例子來體會一下。

我們去掉之前便於觀察的紅色部分。

現在形狀基本與我們預期的效果已經很接近了，但是他位置還不對，我需要通過旋轉的中心來調整鬍子位置。

調整旋轉的圓心，根據新的座標點旋轉就得到我們想要結果。

剩下半邊大家可以嘗試自己根據上面的提示畫一下。