html提示框-【开发技巧】021—如何使用HTML和CSS制作浮动框效果？

bendan520 2023年8月23日 html 0

来源 |

浮动框效果是自定义框阴影技术的一个很好的例子。 在这些技术中，我们可以在不使用 CSS 提供的 box-shadow 属性的情况下创建逼真的阴影。

方法

实现此目的的方法是使用模糊功能在选择器之后创建阴影。

HTML代码

在本文中，我们创建了身体的基本结构。

在这里，我们使用一个类属性

标记在屏幕上渲染浮动框。

            <meta name="viewport"          content="width=device-width,                     initial-scale=1.0">     Floating Box       
GeeksForGeeks

html弹出对话框_html弹出框_html提示框

CSS代码

在本文中html提示框html提示框，我们使用了一些 CSS 属性来设置浮动框的样式并在其上添加一些样式。 以下步骤描述了 CSS 属性：

提示：尝试使用较深的颜色和较低的值来实现阴影的模糊功能。

html弹出对话框_html弹出框_html提示框

如果没有，您最终可能会使阴影变得透明。

     body {         background: green;     }
    h1 {         display: flex;         justify-content: center;         color: white;         font-size: 40px;     }
    .geeks {         width: 400px;         height: 250px;         background: white;         position: absolute;         top: 16%;         left: 35%;         border-radius: 20px;     }
    .geeks::after {         content: "";         position: absolute;         bottom: -30px;         background: rgb(43, 42, 42);         width: 90%;         height: 4px;         left: 3%;         border-radius: 50%;         filter: blur(3px);     }

完整代码

html提示框_html弹出框_html弹出对话框

它是上面两个代码的组合。

 
          <meta name="viewport" content=         "width=device-width,initial-scale=1.0">     Floating Box              body {             background: green;         }         h1 {             display:flex;             justify-content: center;             color: white;             font-size: 40px;                                 }
        .geeks {             width:400px;             height:250px;             background: white;             position: absolute;             top:16%;             left:35%;             border-radius: 20px;         }
        .geeks::after {             content: "";             position: absolute;             bottom: -30px;             background: rgb(43, 42, 42);             width: 90%;             height:4px;             left:3%;             border-radius:50%;             filter: blur(3px);         }  
     
GeeksForGeeks

最终疗效如下：