今天的代码以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 的事。
图
通过给背景一个颜色，以便观察胡子个个部分之间的关系。
图
图
圆角也会影响到边框，这是本次分享的难点，希望大家能理解，如果不理解可以自己写几个小例子来体会一下。
图
我们去掉之前便于观察的红色部分。
图
现在形状基本与我们预期的效果已经很接近了，但是他位置还不对，我需要通过旋转的中心来调整胡子位置。
图
图
调整旋转的圆心，根据新的坐标点旋转就得到我们想要结果。
图
剩下半边大家可以尝试自己根据上面的提示画一下。
网友评论