Filters allow you to apply one or more effects to elements. Some of these filters are color related and can be used to adjust brightness, contrast, and saturation
Grayscale grayscale is a decimal between 0 and 1
Sepia brown values are fractions between 0 and 1
Saturate saturation value is num
Hue -rotate The hue rotation value is Angle
Invert is a decimal between 0 and 1
The opacity value is a decimal number between 0 and 1
The brightness value is between 0 and 1
Contrast The contrast value is num
Blur The blur value is length
The drop shadow shadow
Grayscale: if there is no value in the effect parameter, the rendering will be 100% grayscale, ranging from 0 to 1 -webkit-filter:grayscale(1);
-webkit-filter:sepia(1); -webkit-filter:sepia(1);
Saturate Saturate: This property changes the saturation of the image, ranging from a numeric value to a default value of 100%, -webkit-saturate(6);
Hue -rotate :hue-rotate Changes the hue of a picture. The default value is 0deg and the value is Angle. Example: -webkit-filter:hue-rotate(180deg)
Invert: Invert looks a bit like a negative
The difference between opacity(0.3) and opacity is that the effect of the former depends on its position in the filter chain, whereas opacity always comes into effect after all the filters have been applied
Brightness: Change the brightness of the picture. Default is 100%. Example: -webkit-filter: Brightness (0.5)
Contrast: This property has a value similar to saturate
Blur: This property changes the sharpness of the image. The default value is 0
Drop-shadow: This is similar to box-shadow, which adds shadows to images, much like the box-shadow and text-shadow properties, but with limitations and different variations
The div tag is a block tag, which is a box model. It refers to an area. The box-shadow attribute can only be added to the outside of the box model, so the inside of the box will not be added. Drop-shadow is different. All the selected non-transparent areas are shaded, which is equivalent to a real projection. In order to see more clearly, the border is dotted, so you can see that any part of the border displayed has the drop-shadow attribute. Drop-shadow is more like a shadow
The top is box-shadow and the bottom is drop-shadow