Style filter properties

Set up a shadow effect to the image. Shadows are synthesized in the image below, there may be ambiguity, a specific color can draw the diagram mask offset version. Function accepts <shadow> value (defined in the CSS3 background) type, in addition to "inset" keyword is not allowed. The function with the existing box-shadow box-shadow property is very similar; except that, through the filter, some browsers for better performance provides hardware acceleration. <shadow>参数如下：

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

It is set two shadow offset <length> value. <Offset-x> Preferences horizontal distance of drop shadow appears on the left element. <Offset-y> to set the vertical distance of drop shadow appears above the element. See <length> possible units.
If both values are 0, the shadow appears behind the positive elements (if set   <blur-radius> and/or <spread-radius>， 会有模糊效果 ).

<blur-radius> (optional)

This is the third code> <length> value. The higher the value, the more blurred the shadow will become larger and more light. If not allowed to set a negative value, the default is 0 (the shadow borders are sharp).

<spread-radius> (optional)

This is the fourth <length> value value will shadow expansion and larger, negative shadow will be reduced. If not set, the default is 0 (shadows and elements the same size).
Note: Webkit, as well as some other browsers do not support a fourth length, if the increase will not be rendered.

<color> (optional)

See <color> value of the possible keywords and tags. If not set, the color values ​​based browser. Gecko (Firefox), Presto (Opera ) and Trident (Internet Explorer) in, will apply the values color color attributes. In addition, if the color value is omitted, WebKit shaded transparent.

Convert the image to grayscale. It defines the value of the conversion ratio. Value of 100% is completely converted to a grayscale image, a value of 0% of the image unchanged. Values ​​between 0% and 100%, the multiplier effect is linear. If not set, the default value is 0;

Application to the image hue rotation. "Angle" color ring angle image is a set value adjusted value. Value 0deg, the image change. If the value is not set, the default value is 0deg. Although there is no maximum value that exceeds the value of the equivalent of another perimeter 360deg.

Inverting input image. It defines the value of the conversion ratio. 100% of the value is completely reversed. A value of 0%, the image unchanged. A value between 0% and 100%, the multiplier effect is linear. If the value is not set, the default value is 0.

Conversion degree of transparency of the image. It defines the value of the conversion ratio. 0% is completely transparent, and a value of 100%, the image unchanged. A value between 0% and 100%, the effect is linear multiplier, multiplied by the number of samples is also equivalent to the image. If the value is not set, the default value is 1. This function is very similar to the existing opacity property, except that through the filter, in order to improve the performance of some browsers will provide hardware acceleration.

Converts the image saturation. It defines the value of the conversion ratio. 0% is fully unsaturated, no change in the image is 100%. Other value, the multiplier effect is linear. More than 100% of the value is allowed, there is a higher saturation. If the value is not set, the default value is 1.

Convert the image to sepia. It defines the value of the conversion ratio. Value of 100% is entirely dark brown, is 0% of the image unchanged. Values ​​between 0% and 100%, the multiplier effect is linear. If not set, the default value is 0;

URL function takes an XML file, which sets a SVG filter, and may include an anchor to specify a specific filter element.

E.g:

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

Property is set to default values, refer to: the CSS Initial Keyword