📜  如何使用 HTML 和 CSS 创建 Neumorphism Effect?

📅  最后修改于: 2021-11-07 09:04:09             🧑  作者: Mango

Neumorphism (neomorphism) 是一种为任何网页的网页元素设计样式并提供 3D 效果的现代方式。这种动画效果可以通过使用 HTML 和 CSS 轻松生成。 CSS 的 Box-shadow 属性可用于实现 Neumorphism。它用于在给定元素的一侧添加暗影,在给定元素的另一侧添加光影。

HTML 代码:在本节中,我们将制作盒子的布局。

  • 索引.html:
HTML


  

    

  

    
        
GeeksForGeeks
        
GeeksForGeeks
    
  


HTML


HTML


  

  
  
   

  

    
        
GeeksForGeeks
        
GeeksForGeeks
    
    


CSS 代码:在本节中,我们将使用一些 CSS 属性来设计框。

  • 索引.css:

HTML


完整代码:在本节中,我们将结合以上两节使用 HTML 和 CSS 创建一个 Neumorphism。

HTML



  

  
  
   

  

    
        
GeeksForGeeks
        
GeeksForGeeks
    
    

输出: