这是我参与11月更文挑战的第24天,活动详情查看:2021最后一次更文挑战
drop-shadow
drop-shadow()
函数可以给元素设置符合真实世界阴影规则的投影效果。drop-shadow函数不支持扩展,而是我们不能把red修改为5px,这样是不对的。drop-shadow函数也没有内投影,也不支持inset关键字。不支持投影叠加,也不支持使用逗号语法重叠多个投影。但是drop-shadow可以实现符合真实世界的投影,凡是透明镂空的地方,一定会留下相应的阴影轮廓。
filter: drop-shadow(6px 6px 10px red);
复制代码
第一个参数6px代表的是x偏移,第二个参数6px代表的是y偏移,第三个参数10px代表的是模糊大小,第四个参数代表的是色值。
grayscale
grayscale()
函数可以实现元素的去色效果,让所有彩色值变成灰度值。函数值支持百分比值和数值,范围是0到无穷大。参数值为1或100%的时候表现为完全灰度;参数值大于1或100%的时候也表现为完全灰度。0或0%表示为正常的图像表现。在0到1或0%到100%范围区间的灰度是线性变化的。参数值也可以为空,等同于使用参数值为0。我们可以用于特殊日子让网页变灰或者实现网站中徽章点亮的效果。
filter: grayscale();
// 等于
filter: grayscale(0)
复制代码
hue-rotate
hue-rotate()
函数可以调整元素的色调,但饱和度和亮度保持不变。参数值支持角度值,角度值没有范围限制,每360度就是一个循环。hue-rotate不会改变任意灰度色值。可以用于实现元素的色彩无线变化效果。
.warpper {
filter: hue-rotate(67deg);
}
复制代码
invert
invert()
函数可以让元素的亮度和色调同时反转。支持百分比值和数值。范围0到无穷大,参数值为1或100%的时候图像表现为完全反相。当值大于1或者100%,效果不会再次变化。0或0%表示正常的图像表现。invert函数可以和hue-rotate()函数一起使用,实现反转元素亮度的效果。
.warpper {
filter: invert(66%); //等价于invert(0.66);
}
filter: invert(1) hue-rotate(180deg);
复制代码
opacity
opacity()
函数可以改变元素的透明度,效果和opacity属性类似。参数值支持百分比值和数值,范围是0到无穷大。参数值为0或者0%的时候图像表现为完全透明;参数值为1或100%或者更大值的时候,图像均为正常表现。
.warpper {
filter: opacity(66%); //等价于opacity(0.66);
}
复制代码
saturate
saturate()
函数可以调整元素的饱和度,参数值支持百分比值和数值,范围是0到无穷大,参数值为0或0%表示毫无饱和度,表现为灰度效果,等同于grayscale(1);参数值为1或者100%表示正常的饱和度;随着参数值逐渐大于1,元素的饱和度也会逐渐提升。当参数值为空时,相当于参数值为1;
filter: saturate()
//相等
filter: saturate(1);
复制代码