【萌芽笔记】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"。这可令浏览器呈现出带有指定宽度和高度的框，并把边框和内边距放入框中。

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

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

    
    
    
    
    



    

        

            
Hello,wolrd!
            
You cannot improve your past, but you can improve your future. Once time is wasted, life is wasted.