CSS实例 - CSS 荧光边框

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>数据类型，是一种特别的<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函数可以实现线形重复渐变效果。

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

filter

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

学习地址：
https://www.jianshu.com/p/c501fee6fb68
https://developer.mozilla.org/zh-CN/docs/Web/CSS/linear-gradient

最后编辑于：2022.05.13 09:46:54

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成，浏览时请结合常识与多方信息审慎甄别。
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

CSS实例 - CSS 荧光边框