html5+css3简单边框发光效果

最新推荐文章于 2021-06-21 18:25:23 发布

ALonelyLemon

最新推荐文章于 2021-06-21 18:25:23 发布

阅读量1.5w

点赞数 15

分类专栏： html5+css3+JavaScript 文章标签： css3 html

本文链接：https://blog.csdn.net/lemon_yu/article/details/89280194

版权

html5+css3+JavaScript 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

原视频地址,原视频为演示视频没有讲解

思维启发：如何能给我们的盒子点添加一个方便操作的边框？把它放在一个更大的蒙板上面，蒙板漏出的部分不就可以作为边框吗，而且我们对这个边框的操作会更丰富更简单。

如何制作一个边框发光效果

首先我们制作一个盒子，并使用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>

ALonelyLemon

关注

15
点赞
踩
73

收藏

觉得还不错? 一键收藏
0
评论
html5+css3简单边框发光效果

原视频地址,原视频为演示视频没有讲解思维启发：如何能给我们的盒子点添加一个方便操作的边框？把它放在一个更大的蒙板上面，蒙板漏出的部分不就可以作为边框吗，而且我们对这个边框的操作会更丰富更简单。如何制作一个边框发光效果首先我们制作一个盒子，并使用before和after创建两个蒙板，利用图层调整到页面下方，将盒子背景和body背景调暗，此时我们获得了一个白色边框将第二块蒙板利用滤镜模糊化，...
复制链接

扫一扫

专栏目录