📌  相关文章
📜  使用 HTML 和 CSS 设计磨砂玻璃效果

📅  最后修改于: 2021-08-30 12:41:20             🧑  作者: Mango

在本文中，我们将使用 bootstrap 4 卡片类实现磨砂玻璃效果。下图是您将作为本文的最终结果获得的最终输出。

方法：

1. 设置正文：让我们首先为您的网页设置背景。在           

        
            

GeeksforGeeks

        
    
  

您可以在此处阅读上述属性

2.霜玻璃卡：在样式标签下，使用以下代码，

CSS 

.card {
      box-shadow: 0 0 5px 0 ;
      background: inherit;
      backdrop-filter: blur(10px);
      
}

那么我们这里有什么，

  • box-shadow ：此属性用于为元素的框架提供类似阴影的效果。
  • background :使用它使元素透明并具有与您的网页相同的背景(在 body 类中必须具有“背景附件：固定”，)
  • 背景过滤器：使用它可以将效果应用于元素后面的区域。 (也请阅读本文)基本上，这是减少大量 CSS 样式的属性。
  • margin ：边距和填充根据您的需要。

注意： Mozilla 的 Firefox 浏览器存在问题，在某些情况下，背景过滤器无法正常工作，Chrome 和 Edge 工作正常。

3.

正文：

HTML 


    

        

            
        

    

最终代码：

HTML 



  

    
  
    

  

  
    

        

            
GeeksforGeeks

        

    


  

输出：