Css3: white edges of frosted glass; css3: white edges of frosted glass

Css3: white edges of frosted glass; css3: white edges of frosted glass

Note: Many people should know how to implement the css3 frosted glass effect, but the problem is that the blurred image is equivalent to narrowing down, so the deep-colored image will show white edges, here I will refer to the solution on the Internet!

1. Implementation of glass wool:

CSS3 blur filter implementation
The following test code:

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

The related HTML code is as follows:

 

Note that FireFox does not currently support other browsers, such as FireFox, and does not support CSS3 filter. of course, you can also blur the photos on the FireFox 24 browser. You can use the SVG fuzzy 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="10" />        </filter>    </defs></svg>

The following CSS call code:

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

Complete 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 */}

2. white edge Solution

The related HTML code is as follows:

The principle is that the same image is located under the image to be blurred. When the image to be blurred is reduced, the image is shown as low... The white edge disappears, hahaha... Did you think of it?

Css style is compatible with the frosted glass effect solution of various browsers

-Webkit is targeted at core webkit browsers, Typical CHROME and Safari
-Moz is the core of Mozilla, typical of Firefox.
-O-,-xv-, typical OPERA
-Ms. At first glance, it is Microsoft, which is generally omitted.

Try adding the header of another vendor. Some of them do not support this attribute,

How to add white borders to fonts with CSS?

The text-shadow attribute is used to design the projection effect of the font. However, IE does not support it, but CSS3.0 does. It will be displayed later. Text-shadow: The settings are as follows: text-shadow: 1PX 1PX 1PX # FFFFFF .. The first value is the X axis direction, the second value is the Y axis direction, the third value is the greater the Blur degree after the projection, and the fourth value is the color value after the projection.