新闻-【开发小技巧】026—如何使用HTML和CSS创建浮动框阴影效果？

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

2020-08-18 15:56:30　作者: 匿名浏览量：489次

英文 | 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>

最终效果如下：

0 +1
0 +1
0 +1

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

2020-08-18 15:56:30 作者: 匿名 浏览量：489次

相关新闻

2020-08-18 15:56:30　作者: 匿名浏览量：489次