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

web前端开发

共 2016字,需浏览 5分钟

 ·

2020-08-15 18:00

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

浮动框效果是自定义框阴影技术的经典示例。在这种技术中,我们无需使用CSS提供的box-shadow属性即可创建逼真的阴影效果。
实现方法:选择器之后使用模糊功能创建阴影。
HTML:在本文中,我们创建了主体的基本结构。在这里,我们使用了一个包含Class属性的
标记来在屏幕上渲染浮动框。
<html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Floating Boxtitle> head> <body> <h1>GeeksForGeeksh1> <div class="geeks">div> body> html>
CSS代码:在本节中,我们使用了一些CSS属性来设计浮动框并在其上添加一些样式。
以下步骤描述了CSS属性:
  • 第1步:首先,我们完成了一些基本的样式设置,例如设置背景,创建外框并将所有内容对齐页面中心。

  • 步骤2:现在,使用After选择器在我们创建的框下方创建一条细线,然后使用blur函数为其赋予阴影效果。

提示:请尝试使用较深的颜色和较低的值来实现阴影的模糊功能。如果没有,您可能最终会使阴影透明。
完整代码:它是以上两个代码的组合。
<html lang="en">
<head> <meta charset="UTF-8"> <meta name="viewport" content= "width=device-width,initial-scale=1.0"> <title>Floating Boxtitle> <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>GeeksForGeeksh1> <div class="geeks">div> body>
html>
最终效果如下:


浏览 34
点赞
评论
收藏
分享

手机扫一扫分享

分享
举报
评论
图片
表情
推荐
点赞
评论
收藏
分享

手机扫一扫分享

分享
举报