使用CSS画胡子

如果想要使用CSS绘制胡子样式，这要怎么画？下面本篇文章就来给大家介绍一下使用CSS绘制胡子效果的方法，希望对大家有所帮助。

绘制胡子的步骤：

步骤1： 创建一个黑色圆，圆角半径为50％，宽度和高度为180px

为了保持圆在中间，在左边加350px；为了要使圆可见，可添加背景色作为当前颜色。使用CurrentColor值的好处是更改颜色徽标，以便自动更改背景。

效果图：

步骤2： 使用box-shadow添加框阴影，使页面中间有两个圆

css样式

效果图：

步骤3： 使用::before元素添加左胡须

●　将::before元素添加到div，并添加position， top，width， height， border。

●　同时添加border-radius属性，直到弧线需要形成胡须。

●　固定旋转原点，使左胡须末端准确到达，然后以-40度角旋转。

添加.mustache::before样式

效果图：

步骤4： 使用::after元素添加右胡须

●　将::after元素添加到div，并添加position， top，width， height， border。

●　同时添加border-radius属性，直到弧线需要形成胡须。

●　固定旋转原点，使右胡须末端准确到达，然后以40度角旋转。

添加.mustache::after样式

效果图：

更多 web开发 知识，请查阅 HTML中文网 ！！

1、创建html页面，打开记事本，输入如下截图所示的html代码，将文件保存为html结尾的文件，例如JsTest.html。

2、上一步保存完成后，双击文件即可使用默认浏览器运行页面，如果想使用指定浏览器运行，右键文件，选择【打开方式】->挑选任一已经安装的浏览器即可。

3、原生JS方式，详细代码与注释见截图。

4、原生JS方式，运行效果如下。

5、Jquery方式，必须要引入jquery文件才能使用，此处将jquery下载下来放到Content文件夹中，新的目录结构如下

-- Content

-- jquery-1.11.3.min.js

-- JsTest.html

6、Jquery方式，详细代码与相关注释见截图。

7、Jquery方式，运行效果如下。

---