边框发光效果"/>
html5+css3简单边框发光效果
原视频地址,原视频为演示视频没有讲解
思维启发：如何能给我们的盒子点添加一个方便操作的边框？把它放在一个更大的蒙板上面，蒙板漏出的部分不就可以作为边框吗，而且我们对这个边框的操作会更丰富更简单。
如何制作一个边框发光效果
首先我们制作一个盒子，并使用before和after创建两个蒙板，利用图层调整到页面下方，将盒子背景和body背景调暗，此时我们获得了一个白色边框
将第二块蒙板利用滤镜模糊化，将字体颜色改为白色，此时这个页面呈现中央发光效果
给两个蒙板添加三色颜色渐变，中间色与背景色相同，随着颜色渐变中间部分隐入背景，形成边缘发光效果
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>body{margin: 0;padding: 0;display: flex;justify-content:center; align-items:center;min-height:100vh;background: #060c21;font-family: 'Poppins', sans-serif;}.box{position: relative;width: 300px;height: 400px;display: flex;justify-content: center;align-items: center;background: #060c21;}/*一个溢出的盒子作为边框，添加背景后形成光源效果*/.box::before {content: '';position: absolute;top:-2px;left: -2px;right: -2px;bottom: -2px;background: #FFFFFF;z-index: -1;/*元素堆叠顺序*/}/*另一个溢出的盒子，模糊形成光晕效果*/.box::after {content: '';position: absolute;top: -2px;left: -2px;right: -2px;bottom: -2px;background: #FFFFFF;z-index: -2;/*添加模糊滤镜*/filter: blur(40px);}.box::before,.box::after{/*三色渐变，中间为背景色，融入背景*/background: linear-gradient(235deg,#89ff00,#060c21,#00bcd4);}.content {padding: 20px;box-sizing: border-box;color: #fff;}</style>
</head>
<body>
<div class="box"><div class="content"><h1>黑洞</h1><p>黑洞是现代广义相对论中，宇宙空间内存在的一种天体。黑洞的引力很大，使得视界内的逃逸速度大于光速。“黑洞是时空曲率大到光都无法从其事件视界逃脱的天体”。如果将大量物质集中于空间一点，其周围会产生奇异的现象，即在质点周围存在一个界面——“视界”一旦进入这个界面，即使光也无法逃脱。这种“不可思议的天体”被美国物理学家约翰·阿奇博尔德·惠勒命名为“黑洞”。</p></div>
</div>
</body>
</html>
更多推荐
html5+css3简单边框发光效果
发布评论