【开发小技巧】021—如何使用HTML和CSS创建浮动框效果？

最新推荐文章于 2022-11-02 23:44:30 发布

web前端开发V

最新推荐文章于 2022-11-02 23:44:30 发布

阅读量230

点赞数

文章标签： css html js javascript css3

来源 | https://www.geeksforgeeks.org/how-to-create-floating-box-effect-using-html-and-css/?ref=rp

浮动框效果是自定义框阴影技术的经典示例。在这种技术中，我们无需使用CSS提供的box-shadow属性即可创建逼真的阴影。

方法

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

HTML代码

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

在这里，我们使用了一个包含class属性的<div>标记来在屏幕上渲染浮动框。

<!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <meta name="viewport"          content="width=device-width,                     initial-scale=1.0">     <title>Floating Box</title> </head> <body>     <h1>GeeksForGeeks</h1>     <div class="geeks"></div> </body> </html>

CSS代码

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

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

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

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

<style>     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);     } </style>

完整代码

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

<!DOCTYPE html> <html lang="en">
<head>     <meta charset="UTF-8">     <meta name="viewport" content=         "width=device-width,initial-scale=1.0">     <title>Floating Box</title>     <style>         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);         } </style> </head>
<body>     <h1>GeeksForGeeks</h1>     <div class="geeks"></div> </body>
</html>

最终效果如下：

更多开发技巧

【开发小技巧】019—如何使用HTML和CSS实现鼠标悬停时文本的旋转？

【开发小技巧】018—如何使用AngularJS动态获取div的内容宽度？

【开发小技巧】017—如何使用PHP创建管理员登录页面？

【开发小技巧】016—如何使用HTML和CSS将文字环绕在图片周围？

【开发小技巧】015—如何使用HTML和CSS创建图像叠加悬停？

【开发小技巧】014—如何使用CSS为直线运动中的直线设置动画？

web前端开发V

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【开发小技巧】021—如何使用HTML和CSS创建浮动框效果？

来源 |https://www.geeksforgeeks.org/how-to-create-floating-box-effect-using-html-and-css/?ref=...
复制链接

扫一扫