CSS 荧光边框

以你之姓@ 2021-06-24 16:10 420阅读 0赞

![2789632-0e724ca70249ec22.png][]

Code

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
        <style>
            body{padding:0;margin:0;font-family:'Poppins',sans-serif;display:flex;justify-content:center;align-items:center;
            min-height:100vh;background:#060c21;}
            .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:#ffffff;}
            h1{margin: 0px;padding: 0px;}
            h3{margin: 15px auto 0px; padding: 0px;}
            p{text-indent:2em;}
        </style>
    </head>
    <body>
        <div class="box">    
            <div class="content">        
                <h1>活着</h1>
                <h3>（余华著长篇小说）</h3>       
                    <p>《活着》是作家余华的代表作之一，讲述了在大时代背景下，随着内战、三反五反，大跃进，文化大革命等社会变革，徐福贵的人生和家庭不断经受着苦难，到了最后所有亲人都先后离他而去，仅剩下年老的他和一头老牛相依为命。
                    </p>   
                </div>
        </div>
    </body>
    </html>

#### linear-gradient ####

CSS **`linear-gradient()`** 函数用于创建一个表示两种或多种颜色线性渐变的图片。其结果属于[`<gradient>`][gradient]数据类型，是一种特别的[`<image>`][image]数据类型。

> /\* 渐变轴为45度，从蓝色渐变到红色 */  
> linear-gradient(45deg, blue, red);  
> /* 从右下到左上、从蓝色渐变到红色 */  
> linear-gradient(to left top, blue, red);  
> /* 从下到上，从蓝色开始渐变、到高度40%位置是绿色渐变开始、最后以红色结束 \*/  
> linear-gradient(0deg, blue, green 40%, red);

**提示：**利用[`repeating-linear-gradient`][repeating-linear-gradient]函数可以实现线形重复渐变效果。

**提示：**由于`<gradient>`数据类型系`<image>`的子数据类型，`<gradient>`只能被用于`<image>`可以使用的地方。因此，`linear-gradient()` 并不适用于\[`background-color`\]([https://developer.mozilla.org/zh-CN/docs/Web/CSS/background-color][https_developer.mozilla.org_zh-CN_docs_Web_CSS_background-color] "CSS属性中的 background-color 会设置元素的背景色, 属性的值为颜色值或关键字"transparent"二者选其一.")以及类似的使用 [`<color>`][color]数据类型的属性中。

![2789632-092383c7b5996c1b.gif][]

#### filter ####

filter CSS属性将模糊或颜色偏移等图形效果应用于元素。滤镜通常用于调整图像，背景和边框的渲染。

![2789632-96567f5c2619368d.gif][]

学习地址：  
[https://www.jianshu.com/p/c501fee6fb68][https_www.jianshu.com_p_c501fee6fb68]  
[https://developer.mozilla.org/zh-CN/docs/Web/CSS/linear-gradient][https_developer.mozilla.org_zh-CN_docs_Web_CSS_linear-gradient]

![2789632-35685f5563233b74.png][]

张中华公众号

![2789632-426717155d1e66dd.jpg][]

[2789632-0e724ca70249ec22.png]: /images/20210615/b631ff95fd8948159c6f2dbc930842ed.png
[gradient]: https://links.jianshu.com/go?to=https%3A%2F%2Fdeveloper.mozilla.org%2Fzh-CN%2Fdocs%2FWeb%2FCSS%2Fgradient
[image]: https://links.jianshu.com/go?to=https%3A%2F%2Fdeveloper.mozilla.org%2Fzh-CN%2Fdocs%2FWeb%2FCSS%2Fimage
[repeating-linear-gradient]: https://links.jianshu.com/go?to=https%3A%2F%2Fdeveloper.mozilla.org%2Fzh-CN%2Fdocs%2FWeb%2FCSS%2Frepeating-linear-gradient
[https_developer.mozilla.org_zh-CN_docs_Web_CSS_background-color]: https://links.jianshu.com/go?to=https%3A%2F%2Fdeveloper.mozilla.org%2Fzh-CN%2Fdocs%2FWeb%2FCSS%2Fbackground-color
[color]: https://links.jianshu.com/go?to=https%3A%2F%2Fdeveloper.mozilla.org%2Fzh-CN%2Fdocs%2FWeb%2FCSS%2Fcolor_value
[2789632-092383c7b5996c1b.gif]: /images/20210615/277eb1cdd0404e32b6faf385d460fe52.png
[2789632-96567f5c2619368d.gif]: /images/20210615/6d069996856b4602aaf72eff21ac8be7.png
[https_www.jianshu.com_p_c501fee6fb68]: https://www.jianshu.com/p/c501fee6fb68
[https_developer.mozilla.org_zh-CN_docs_Web_CSS_linear-gradient]: https://links.jianshu.com/go?to=https%3A%2F%2Fdeveloper.mozilla.org%2Fzh-CN%2Fdocs%2FWeb%2FCSS%2Flinear-gradient
[2789632-35685f5563233b74.png]: /images/20210615/07357ab7282047c685dbb74c08974a96.png
[2789632-426717155d1e66dd.jpg]: /images/20210615/6800b2f40ffe40c58237ac1acd01fd1b.png