css3-filter属性的学习

最新推荐文章于 2024-02-22 17:09:11 发布

萌芽子

最新推荐文章于 2024-02-22 17:09:11 发布

阅读量390

点赞数 3

分类专栏：萌芽笔记文章标签：前端 css3 filter

本文链接：https://blog.csdn.net/Meng_ya_zi/article/details/96483893

版权

萌芽笔记专栏收录该内容

26 篇文章 0 订阅

订阅专栏

[ 每日一练 ]荧光边框效果

又到了萌芽的每日练习时间了！（文章结尾放练习代码）

总结一下这次练习get到的新技能！第一次看到这个名字的时候第一反应是过滤器哈哈哈。

filter属性

none【默认效果】

粉色小方块

blur()【高斯模糊 | px】

brightness()【明暗度 | %】

contrast()【对比度 | %】

drop-shadow()【投影 | x，y，大小单位，颜色】查了一下他和box-shadow的区别这里稍微讲一下，drop-shadow支持透明！是真正的阴影而box-shadow是盒模型所以不支持透明，这里用大佬的一张图片瞬间看出差距，贴上链接感兴趣的可以去看看：https://www.zhangxinxu.com/wordpress/2016/05/css3-filter-drop-shadow-vs-box-shadow/

grayscale()【灰度 | %】

hue-rotate()【色相 | deg】

invert()【图像反转 | %】

opacity()【透明的 | %】

saturate()【饱和度 | %】

sepia()【深褐色 | %】

url()

URL函数接受一个XML文件，该文件设置了一个SVG滤镜，且可以包含一个锚点来指定一个具体的滤镜元素。

filter: url(svg-url#element-id)

box-sizing属性

如您需要并排放置两个带边框的框，可通过将 box-sizing 设置为 "border-box"。这可令浏览器呈现出带有指定宽度和高度的框，并把边框和内边距放入框中。

一般用于有边框的盒子放一起不会因为边框挤飞出去等等。

====================================================================接下来是代码时间！

<!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>荧光边框</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            background-color: #060c21;
            font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif, sans-serif;
        }

        .box {
            position: absolute;
            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: white;
            z-index: -1;
            transition: 3s;
        }

        .box::after {
            content: '';
            position: absolute;
            top: -2px;
            left: -2px;
            right: -2px;
            bottom: -2px;
            background: white;
            z-index: -2;
            /* 高斯模糊，太漂亮了，滤镜属性 */
            filter: blur(40px);
            transition: 3s;
        }

        .box::before,
        .box::after {
            background: linear-gradient(234deg, rgb(255, 0, 140), #060c21, blue)
        }

        .box:hover::before,
        .box:hover::after {
            filter: blur(10px);
        }

        .content {
            padding: 20px;
            box-sizing: border-box;
            color: white;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="content">
            <h1>Hello,wolrd!</h1>
            <p>You cannot improve your past, but you can improve your future. Once time is wasted, life is wasted.</p>
        </div>
    </div>
</body>

</html>