CSS |胡子

问题陈述：使用 CSS 创建小胡子。

创建胡子的步骤：
• 第1步：
  • 创建一个半径为 50%，宽度和高度为 180px 的黑色圆圈。
  • 要将圆圈保持在中间，在其左侧添加 350px。
  • 还要使圆圈可见，添加背景颜色作为当前颜色。
  • currentColor 的好处是更改颜色标志，以便背景自动更改。
  • 将完成 HTML 编码以在正文中添加 div 类。

  输出：
  

• 第2步：
  • 添加框阴影在页面中间有两个圆圈。
  • 阴影的尺寸将为 150px 2410px 0 0 currentcolor。
  • 以上尺寸是 x 偏移、y 偏移、展开、模糊和颜色。

  输出：
  

• 第 3 步：
  • 现在，不需要之前的圆，只需要它的影子。所以，删除原来的圈子。
  • 将before元素添加到div并添加位置、顶部、宽度、高度、边框。
  • 还要添加边界半径直到弧需要去形成胡子的地方。
  • 固定旋转原点，使左胡须末端准确到达，然后旋转-40度角。

  输出：
  

• 第四步：
  • 现在左边的胡子已经准备好了，所以将 after 元素添加到 div 中。
  • 添加位置、顶部、宽度、高度、边框，就像在 before 元素中所做的那样。
  • 还要添加边界半径，直到弧需要去形成胡子的地方。
  • 固定旋转原点，使右胡须的末端也准确到达，然后将其旋转40度角。

  输出：