css3 曇りガラス効果の白いエッジ問題_html/css_WEB-ITnose

注: CSS3 のすりガラス効果を実現する方法は多くの人が知っているはずですが、問題があります。オンラインでの解決策を参照してください。

1. すりガラスの実装方法:

CSS3 ぼかしフィルターの実装
以下のテストコード:

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

関連する HTML コードは次のとおりです:

<img src="mm1.jpg" /><img src="mm1.jpg" class="blur" />

なお、 Firefox は現在 CSS3 フィルターをサポートしておらず、FireFox などの他のブラウザーはまだ CSS3 フィルターをサポートしていません。もちろん、(たとえば) FireFox 24 ブラウザーで写真をぼかす効果を実現することは可能です。 SVGぼかしフィルターを使用できます。
blur.svg という名前の新しい 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>

次の CSS 呼び出しコード:

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

完全な CSS コード

RREE RREE RREE