Fuzzy effect of CSS3 wool glass

Some time ago, iOS7 is not a melon is not ripe on the ground, and then picked up a lot of melon, and then began a variety of discussions at home and abroad, from the interface to animation, from compatibility to implementation. Among them, "Mao Glass" a bang Bang was born, some love toss riders people can figure out how to use CSS to achieve, domestic (do not remember), foreign also have (for example, CSS tricks this article "Lurry Transparent Header Effect from IOS7 In CSS ") ~
CSS3 Blur Filter Implementation
Test code as follows:

. blur {        -webkit-filter:blur (10px);/* Chrome, Opera *       /-moz-filter:blur (10px);        -ms-filter:blur (10px);                Filter:blur (10px);    }

The relevant HTML code is as follows:

Need to note that Firefox does not support the current, other browsers, such as Firefox has not supported CSS3 filter. Of course, it is also possible to achieve (for example) the effect of blurring a photo on a Firefox 24 browser. You can use the SVG blur filter.
The new SVG file named Blur.svg:

<?xml version= "1.0" encoding= "Utf-8"? ><! DOCTYPE svg public "-//W3C//DTD svg 1.1//en" "Http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" ><svg version= " 1.1 "      xmlns=" http://www.w3.org/2000/svg "     xmlns:xlink=" Http://www.w3.org/1999/xlink "     xmlns:ev=" http ://www.w3.org/2001/xml-events "          baseprofile=" full ">     <defs>        <filter id=" blur ">            <fegaussianblur stddeviation= "Ten"/>        </filter>    </defs></svg>

The following CSS call code:

Filter:url (Blur.svg#blur); /* FireFox, Chrome, Opera */

Full CSS Code

. blur {    filter:url (Blur.svg#blur);/* FireFox, Chrome, Opera *        /-webkit-filter:blur (10px);/* Chrome, Opera */
   -moz-filter:blur (10px);        -ms-filter:blur (10px);                Filter:blur (10px);        Filter:progid:DXImageTransform.Microsoft.Blur (pixelradius=10, Makeshadow=false); /* IE6~IE9 */}

Fuzzy effect of CSS3 wool glass