使用CSS画胡子

html-css010

使用CSS画胡子,第1张

如果想要使用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中文网 ！！

一般添加css样式表的方式有3种！

一种是引入css样式表，引入css样式表一般用link的方式引入，代码如下

<link href="路径和css样式表的名称" rel="stylesheet" type="text/css">

如果对写代码不是很流利的话可以用DW 手动引入，操作步骤图片如下：

选择好了点击确认就可以了。添加好了之后你会看到就是上面所示的代码！

那么第二种添加css样式的方法是网页里添加css样式

<style>

.header{}

</style>（这种方式不推荐哦）

第三种就是在你需要给某个区块添加特殊的样式比如 你的div区块里的特定区块需要单独添加一个样式。

例如：

<div class="main_left">

<ul>

  <li class="name"></li>

      <li class="neirog">

      <p style="color:#F00"></p>

      </li>

  </ul>

</div>

如上所示 在给P 标签添加了一个样式，这种方法也不是很推荐的！ 除特定的需求除外。