css3-filter属性的学习

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

又到了萌芽的每日练习时间了!(文章结尾放练习代码)

总结一下这次练习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>

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值