CSS3 filter Blur Effect

Recently in making a CSS3 filter blur effect, but I found that some browsers have no effect, this is caused by browser compatibility, afraid to forget in the future, so write down first, also hope to help the needs of the small partners.

The code is as follows:

div{//Setting Translucent filter Effects

opacity:0.5;
Filter:alpha (OPACITY=50);

}

1, Filter: Set the translucent filter effect on IE, Filter:alpha (opacity=50) represents the object 50% translucent, support IE8 and the following browsers.
2, OPACITY:CSS3 property, all browser support except IE, including Google, Firefox, IE9 and above browser.

div{//setting Blur filters

-webkit-filter:blur (3PX);

-moz-filter:blur (3PX);

Filter:url (Blur.svg#blur);

Filter:progid:DXImageTransform.Microsoft.Blur (pixelradius= ' 3 ');

Filter:blur (3PX);

}

1. Attributes have not yet become part of the world standard, so you need to add a prefix, currently only-webkit-filter:blur (3px) prefix for Chrome browser support.

2.firefox does not support such direct write-moz-filter:blur (3px), the need to introduce blur.svg files to complete the same as other browser-like Blur effect, and the file in the code is such a drop:

<svg version= "1.1" xmlns= "Http://www.w3.org/2000/svg" >
<filter id= "Blur" >
<fegaussianblur stddeviation= "3"/>
</filter>
</svg>

As long as the introduction of the file in the CSS style is OK, the introduction of the style is as follows: Filter:url (Blur.svg#blur);

3.IE Browser directly through the wording of the filter can be: Filter:progid:DXImageTransform.Microsoft.Blur (pixelradius= ' 3 '), but only support IE6~IE9,

IE10 and later IE11 are supported by SVG filters, but this demo is not valid under these browsers, why?

As if it does not support the use of Filter:url directly in CSS, the specific solution is still under study.