CSS中常见的视觉效果(二)

289 阅读3分钟

这是我参与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);