前端|网页制作秘密武器 之发光边框
欢迎点击「算法与编程之美」↑关注我们！
本文首发于微信公众号："算法与编程之美"，欢迎关注，及时了解更多此系列文章。
1．引言
学习前端，我们除了要学会如何制作静态的网页，我们还要学会一些特殊的效果，运用我们所学的知识，制作出属于我们的有个性的东西，接下来，就让我们一起来学习一下荧光边框边框的制作方法吧。
代
码
讲
解
01
定义文档主体性质
body {
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: #060c21;
font-family: 'Poppins', sans-serif;
}
02
用box的伪元素添加一个面积比box略大的矩形,并通过改变层叠次序,置于box的下层,达到给box设置边框的效果。
.box::before {
content: '';
position: absolute;
top: -2px;
left: -2px;
right: -2px;
bottom: -2px;
background: #fff;
z-index: -1;
}
03
于上面类似,做一个面积比box略大的矩形,并通过改变层叠次序,置于box的下层,达到给box设置边框的效果。
.box::after {
content: '';
position: absolute;
top: -2px;
left: -2px;
right: -2px;
bottom: -2px;
background: #fff;
z-index: -2;
04
滤镜属性：给图像设置高斯模糊。"radius"一值设定高斯函数的标准差，或者是屏幕上以多少像素融在一起，所以值越大越模糊；如果没有设定值，则默认是0；这个参数可设置css长度值，但不接受百分比值。
filter: blur(40px);
}
.box::before,
.box::after {
05
linear-gradient()：函数用于创建一个线性渐变的 "图像"。
参数1:用角度值指定渐变的方向（或角度）（12点钟方向为0deg）。
background: linear-gradient(235deg, #89ff00, #060c21, #00bcd4);
}
.content {
padding: 20px;
box-sizing: border-box;
color: #fff;
06
完整代码
<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: #fff;
z-index: -1;
}
.box::after {
content: '';
position: absolute;
top: -2px;
left: -2px;
right: -2px;
bottom: -2px;
background: #fff;
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>Glowing Border</h1>
<p>
我们除了要学会如何制作静态的网页，我们还要学会一些特殊的效果，运用我们所学的知识，制作出属于我们的有个性的东西，接下来，就让我们一起来学习一下荧光边框边框的制作方法吧。
</p>
</div>
</div>
</body>
</html>
结语
HTML+CSS我们可以根据自己的需要组成自己想要的效果，但在我们学习的过程中，要多加练习，这样我们才能更加熟练的运用各种标签和属性。
参考文献：
【1】不愿透漏姓名的红领巾-《三分钟实现荧光边框》https://www.bilibili.com/video/av48828800?from=search&seid=1776003874066519402-[HTML+CSS]
END
主 编 | 张祯悦
责 编 | 杨金月
where2go 团队
微信号：算法与编程之美
温馨提示：点击页面右下角“写留言”发表评论，期待您的参与！期待您的转发！