-What is the webkit-filter attribute used for?-webkit-filter attribute

-What is the webkit-filter attribute used for?-webkit-filter attribute
In the past two days, I have seen that foreign websites have introduced webkit-filter, which is very confusing. Do you want to learn IE? Today, I saw that it has nothing to do with the IE filter, and the effect is very good! These Filter Effects were originally used for SVG. W3C was introduced to CSS and then CSS Filter Effects 1.0 was developed. Now webkit is the first to support them. Currently, the following effects are supported in the specifications:

• Grayscale
• Sepia Brown
• Saturate saturation
• Hue-rotate color phase Rotation
• Invert reversed
• Opacity transparency
• Brightness
• Contrast
• Blur
• Drop-shadow

Well, some of them are repeated with CSS3. However, we need to take a look at the specific situation. At least we can achieve the same effect in different ways-for example, transparency. The usage is standard CSS:-webkit-filter: blur (2px );

Eric Bidelman wrote a demo to conveniently view various effects. However, considering that a website cannot be accessed in China for unknown reasons, I simply translated the demo page and put it here for you to preview. Please click here to view it.

Please note that only the latest webkit nightly and Chrome 18.0.976 and later versions are supported to change the filter. Therefore, you need to download the latest version to try it out ~~ I use webkit nightly. Now, let's take a look at some simple results: the source image.
Fuzzy
50% grayscale
100% grayscale
50% Brown
100% Brown
50% brightness
100% brightness
Color
Reversed color
Saturation
Contrast
Well, we can also implement various webpage special effects on mobile phones, such as lomo and Japanese. We can also implement some simple page effects, with CSS 3 shadow, mask, gradient, and so on. I believe there is no need for instagram to be much different.