CSS3学习笔记-05-滤镜(filter)和属性值计算(calc)

CSS3学习笔记-05-滤镜(filter)和属性值计算(calc)

滤镜和属性值计算,都是比较常用的技巧

滤镜 filter

属性值:
高斯模糊:blur(npx) 其中n越大,模糊越强
亮度:brightness(n%) n为100表示100% 为图片的正常亮度,越小越黑,越大越白。你懂的
其他的值可以参考这篇文章 ,这里只介绍常用技巧CSS3中强大的filter(滤镜)属性

模糊blur

模糊比较容易,当我们定一个图片
图片如下

然后给他加上模糊

 img{
            filter: blur(5px);
        }

图片就变成了下面这样

很好理解

calc属性值计算

css3的这个特性,可以让width,hight等数值可以进行数学运算,还是比较好用的

当我们设置一个div

<div>我是特殊的</div>

我们让他的width(宽度)始终是50+100 = 150px,就可以这样写

div {
            width:calc(50px + 100px);
            background-color: blue;
        }

效果如下

必须注意的是,运算符前后一定要加两个空格
其实这个方法如果在写js后用的并不多,但是布局的时候还是很好用的