📌  相关文章
📜  CSS |胡子

📅  最后修改于: 2021-08-31 07:43:18             🧑  作者: Mango

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

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

    
    mustache
    
    
       
       
             
    
       
       

    输出：

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

    
    mustache
    
    
       
       
             
    
       
       

    输出：

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

    
    mustache
    
    
       
       
             
    
       
       

    输出：

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

    
    mustache
    
    


    

    输出：