前端|网页制作秘密武器 之发光边框

欢迎点击「算法与编程之美」↑关注我们!

本文首发于微信公众号:"算法与编程之美",欢迎关注,及时了解更多此系列文章。

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 团队


微信号:算法与编程之美

温馨提示:点击页面右下角“写留言”发表评论,期待您的参与!期待您的转发!

原文发布于微信公众号 - 算法与编程之美(algo_coding)

原文发表时间:2019-05-18

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

扫码关注云+社区

领取腾讯云代金券