📌  相关文章
📜  如何使用 HTML 和 CSS 创建浮动框效果?

📅  最后修改于: 2021-09-02 04:57:41             🧑  作者: Mango

浮动框效果是自定义框阴影技术的经典示例。在这种技术中,我们在不使用 CSS 提供的 box-shadow 属性的情况下创建逼真的阴影。

方法:方法是使用after选择器,使用blur函数创建阴影。

HTML 代码:在本节中,我们创建了主体的基本结构。在这里,我们使用了一个包含 class 属性的

标签来在屏幕上呈现浮动框。




    
    
    Floating Box


    

GeeksForGeeks

    

CSS 代码:在本节中,我们使用了一些 CSS 属性来设计浮动框并为其设置一些样式。以下步骤描述了 CSS 属性:

  • 第 1 步:首先,我们完成了一些基本样式,例如提供背景、创建框并将所有内容与页面中心对齐。
  • 第 2 步:现在,使用 after 选择器在我们创建的框下方创建一条细线,然后使用模糊函数为其提供阴影效果。

提示:尝试使用较深的颜色和较低的阴影模糊函数值。如果没有,您最终可能会使您的阴影变得透明。


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



  

    
    
    Floating Box
    

  

    

GeeksForGeeks

    
  

输出: