|
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] 主 编 | 张祯悦 责 编 | 杨金月 where2go 团队 |
|
|
