Style filterProperty

Applies a shadow effect to the image. The shadow is composited underneath the image, and can be a blurred offset version of a mask drawn in a specific color. The function accepts a value of type <shadow> (defined in CSS3 backgrounds), except that the "inset" keyword is not allowed. This function is very similar to the existing box-shadow property; the difference is that through filters, some browsers provide hardware acceleration for better performance.<shadow>参数如下：

<offset-x> <offset-y> (required)

These are two <length> values that set the shadow offset.<offset-x>Sets the horizontal distance. A negative value places the shadow to the left of the element.<offset-y>Sets the vertical distance. A negative value places the shadow above the element. See<length>possible units.
If both values are0, the shadow appears directly behind the element (if set <blur-radius> and/or <spread-radius>，there will be a blur effect.).

<blur-radius> (optional)

This is the third <length> value. The larger the value, the blurrier the shadow, and the shadow will become larger and lighter. Negative values are not allowed. If not set, the default is 0 (the shadow's edge is very sharp).

<spread-radius> (optional)

This is the fourth <length> value. Positive values will expand and enlarge the shadow, negative values will shrink the shadow. If not set, the default is 0 (the shadow will be the same size as the element).
Note: WebKit and some other browsers do not support the fourth length; if added, it will not render.

 

<color> (optional)

See <color> for possible keywords and notations for this value. If not set, the color value depends on the browser. In Gecko (Firefox), Presto (Opera) and Trident (Internet Explorer), the colorcolorproperty value. In addition, if the color value is omitted, the shadow is transparent in WebKit.

Converts the image to grayscale. The value defines the proportion of the conversion. A value of 100% completely converts the image to grayscale, and a value of 0% leaves the image unchanged. Values between 0% and 100% are linear multipliers of the effect. If not set, the value defaults to 0.

Applies a hue rotation to the image. The "angle" value sets the hue angle by which the image will be adjusted. A value of 0deg leaves the image unchanged. If the value is not set, the default is 0deg. Although there is no maximum value, values over 360deg are equivalent to going around the wheel again.

Inverts the input image. The value defines the proportion of the conversion. A value of 100% is completely inverted. A value of 0% leaves the image unchanged. Values between 0% and 100% are linear multipliers of the effect. If the value is not set, the default is 0.

Converts the transparency of the image. The value defines the proportion of the conversion. A value of 0% is completely transparent, and a value of 100% leaves the image unchanged. Values between 0% and 100% are linear multipliers of the effect, equivalent to multiplying the image samples by the amount. If the value is not set, the default is 1. This function is very similar to the existing opacity property; the difference is that through filter, some browsers provide hardware acceleration to improve performance.

Converts the saturation of the image. The value defines the proportion of the conversion. A value of 0% is completely unsaturated, and a value of 100% leaves the image unchanged. Other values are linear multipliers of the effect. Values over 100% are allowed, providing higher saturation. If the value is not set, the default is 1.

Converts the image to sepia. The value defines the proportion of the conversion. A value of 100% is completely sepia, and a value of 0% leaves the image unchanged. Values between 0% and 100% are linear multipliers of the effect. If not set, the value defaults to 0.

The URL function accepts an XML file that sets an SVG filter, and can include an anchor to specify a specific filter element.

For example:

filter: url(svg-url#element-id)

To set the property to its default value, see:CSS initial keyword