简介
浏览器兼容性
filter 函数
1.blur(px)
给图像设置高斯模糊,值越大越模糊。
默认是0，可设置css长度值，但不接受百分比值。
2.url()
接受一个XML文件。该文件设置了 一个SVG滤镜，且可以包含一个锚点来指定一个具体的滤镜元素。
如：
3.hue-rotate(deg)
给图像应用色相旋转。
0deg：图像无变化。若值未设置，默认值是0deg。
该值虽然没有最大值，超过360deg的值相当于又绕一圈。
4.brightness(%)
给图片应用一种线性乘法，使其看起来更亮或更暗。
0%：图像会全黑；100%：图像不变。
值超过100%也是可以的，图像会比原来更亮。如果没有设定值，默认是1。
5.contrast(%)
调整图像的对比度。
0%：图像会全黑；100%：图像不变。
可以超过100%，意味着会运用更低的对比。若没有设置值，默认是1。
6.saturate(%)
转换图像饱和度。
0%：完全不饱和；100%：图像无变化。
超过100%的值是允许的，则有更高的饱和度。 若值未设置，值默认是1。
7.opacity(%)
转化图像的透明程度。
0%：完全透明，100%：图像无变化。
值在0%和100%之间，则是效果的线性乘子，也相当于图像样本乘以数量。 若值未设置，值默认是1
8.grayscale(%)
将图像转换为灰度图像。
100%：完全转为灰度图像；0%：图像无变化。
值在0%到100%之间，则是效果的线性乘子。若未设置，值默认是0；
9.sepia(%)
将图像转换为深褐色。
100%：完全转为深褐色；0%：图像无变化。
值在0%到100%之间，则是效果的线性乘子。若未设置，值默认是0；
10.invert(%)
反转输入图像。
100%：完全反转；0%：图像无变化。
值在0%和100%之间，则是效果的线性乘子。 若值未设置，值默认是0。
11.drop-shadow()
给图像设置一个阴影效果。阴影是合成在图像下面，可以有模糊度的，可以以特定颜色画出的遮罩图的偏移版本。
参数与box-shadow类似。但
应用：圆缺角边框+阴影
1 | <div class="shadow">不规则边框</div> |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | .shadow{ color: #fff; font-size: 24px; text-align: center; width: 200px; height: 200px; line-height: 200px; /*渐变背景制作圆缺角*/ background: radial-gradient(circle at top left, transparent 25px, red 0) top left, radial-gradient(circle at top right, transparent 25px, red 0) top right, radial-gradient(circle at bottom right, transparent 25px, red 0) bottom right, radial-gradient(circle at bottom left, transparent 25px, red 0) bottom left; background-size: 50% 50%; background-repeat: no-repeat; /*不规则阴影*/ filter:drop-shadow(0 0 12px rgba(0,0,0,0.5)); } |
效果图：
我的个人博客 有空来坐坐
https://www.wangyanan.online