绘制胡子的步骤:
步骤1:创建一个黑色圆,圆角半径为50%,宽度和高度为180px
为了保持圆在中间,在左边加350px;为了要使圆可见,可添加背景色作为当前颜色。使用CurrentColor值的好处是更改颜色徽标,以便自动更改背景。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>胡子</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> .mustache { width: 180px; height: 180px; left: 350px; border-radius: 50%; position: absolute; color: black; background-color: currentColor; } </style> </head> <body> <div class="mustache"></div> </body> </html>
效果图:
步骤2:使用box-shadow添加框阴影,使页面中间有两个圆
css样式
.mustache { width: 180px; height: 180px; left: 350px; border-radius: 50%; position: absolute; color: black; box-shadow: 150px 240px 0 0 currentColor, 300px 240px 0 0 currentColor; }
效果图:
步骤3:使用::before元素添加左胡须
● 将::before元素添加到div,并添加position, top,width, height, border。
● 同时添加border-radius属性,直到弧线需要形成胡须。
● 固定旋转原点,使左胡须末端准确到达,然后以-40度角旋转。
添加.mustache::before样式
.mustache::before{ content:""; position:absolute; left:30px; top:120px; width:210px; height:120px; border-bottom:solid 180px currentColor; border-radius:0 0 0 100%; transform:rotate(-40deg); transform-origin:right 210px; }
效果图:
步骤4:使用::after元素添加右胡须
● 将::after元素添加到div,并添加position, top,width, height, border。
● 同时添加border-radius属性,直到弧线需要形成胡须。
● 固定旋转原点,使右胡须末端准确到达,然后以40度角旋转。
添加.mustache::after样式
.mustache::after{ content:""; position:absolute; left:390px; top:120px; width:210px; height:120px; border-bottom:solid 180px currentColor; border-radius:0 0 100%0; transform:rotate(40deg); transform-origin:left 210px; }
效果图:
以上就是如何使用CSS画胡子?的详细内容,更多请关注0133技术站其它相关文章!