绘制胡子的步骤:
步骤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 标签添加了一个样式,这种方法也不是很推荐的! 除特定的需求除外。