📜  如何使用 CSS 创建雕刻文字效果?

📅  最后修改于: 2021-10-28 03:16:42             🧑  作者: Mango

雕刻文字效果也称为浮雕效果,因为它看起来像是在背景上浮雕的文字。它在 CSS 中也称为 Neumorphism。当我们想让我们的网站看起来干净清爽时,就会使用这种效果。嵌入的文本可以与背景颜色相同,也可以不同。我们将查看相同的颜色类型。
方法:方法是首先通过赋予文本与背景相同的颜色来使文本不可见,然后为文本提供一个细阴影,以便由于边框阴影而使其可见。
HTML 代码:在本节中,我们创建了两个 div 和一个包含在嵌套 div 中的文本。您还可以使用 h1 代替嵌套的 div 标签。

html



    
    
    Embedded Text
    


   
       
           GeeksforGeeks        
   


CSS


html


 

    
    
    Embedded Text
 
    
     
    
 

 

    
        
            GeeksforGeeks         
    
 


CSS 代码:在 CSS 中,首先我们完成了一些基本样式,例如将文本居中对齐并为其提供背景并设置 google-font。然后,正如方法中所讨论的,我们为文本赋予了与背景相同的颜色。现在我们使用了黑色和白色细阴影的组合在我们的文本周围提供一种轮廓效果,使我们的文本现在可见。
提示:您可以为阴影和文本使用任何颜色,但请确保阴影尽可能薄。

CSS


完整代码:是以上两段代码的组合。

html



 

    
    
    Embedded Text
 
    
     
    
 

 

    
        
            GeeksforGeeks         
    
 

输出: