This is the 24th day of my participation in the November Gwen Challenge. Check out the event details: The last Gwen Challenge 2021

drop-shadow

The drop-shadow() function gives elements a drop shadow effect that conforms to real-world shadow rules. The drop-shadow function does not support extension, but we cannot change red to 5px, which is wrong. The drop-shadow function also has no inner projection and does not support the inset keyword. Projection overlay is not supported, nor is the use of comma syntax to overlap multiple projections. However, drop-shadow can realize the projection in line with the real world. Wherever there is a transparent hollowed-out place, the corresponding shadow outline will be left.

filter: drop-shadow(6px 6px 10px red);
Copy the code

The first parameter 6px represents the X offset, the second parameter 6px represents the Y offset, the third parameter 10px represents the blur size, and the fourth parameter represents the color value.

grayscale

The grayscale() function de-colors elements, turning all color values to grayscale. Function values support percentage and numerical values ranging from 0 to infinity. When the parameter value is 1 or 100%, the gray scale is complete. When the parameter value is greater than 1 or 100%, it also shows complete gray scale. 0 or 0% represents normal image performance. The grayscale varies linearly in the range of 0 to 1 or 0% to 100%. The parameter value can also be null, which is equivalent to using the parameter value 0. We can use it to make the page gray on special days or to make the badge on the site light up.

filter: grayscale(a); / / equal tofilter: grayscale(0)
Copy the code

hue-rotate

The hue-rotate() function adjusts the hue of an element, but the saturation and brightness remain the same. The parameter value supports Angle value, which has no limit on the range and is a cycle every 360 degrees. Hue -rotate does not change any gray color value. Can be used to achieve the element color wireless change effect.

.warpper {
    filter: hue-rotate(67deg);
}
Copy the code

invert

The invert() function reverses the element’s brightness and hue simultaneously. Percentage and numerical values are supported. The range is 0 to infinity, and the image is completely inverted when the parameter value is 1 or 100%. When the value is greater than 1 or 100%, the effect does not change again. 0 or 0% represents normal image performance. The invert function can be used with the hue-rotate() function to reverse the brightness of elements.

.warpper {
    filter: invert(66%); // equivalent to invert(0.66);
}
filter: invert(1) hue-rotate(180deg);
Copy the code

opacity

The opacity() function changes the opacity of an element, similar to the effect of the opacity property. Parameter values Support percentage and numerical values ranging from 0 to infinity. When the parameter value is 0 or 0%, the image is completely transparent. When the parameter value is 1 or 100% or greater, the image is normal.

.warpper {
    filter: opacity(66%); / / equivalent to theopacity(0.66);
}
Copy the code

saturate

Saturate () function can adjust the saturation of elements. Parameter values support percentage values and values ranging from 0 to infinity. A parameter value of 0 or 0% indicates no saturation and is displayed as grayscale effect, equivalent to grayscale(1). A parameter value of 1 or 100% indicates normal saturation; As the parameter value becomes greater than 1, the saturation of the element increases. If the parameter value is null, it is equivalent to 1.

filter: saturate() // equal filter:saturate(1);
Copy the code