Bluring a div with CSS

前端 未结 2 863
旧巷少年郎
旧巷少年郎 2021-01-24 05:56

Is it possible to blur a div with CSS3? And I don\'t mean the javascript blur, I mean the photoshop blur.

I don\'t want the edges of the div to be blurred, I want to con

2条回答
  •  野的像风
    2021-01-24 06:34

    It is possible with an SVG filter.

    The basics of it is that it's just a simple feGaussianBlur.

    Here it is: http://jsfiddle.net/aXUtU/1/

    This works in Firefox 4, and should work from 3.5 up except for the matter of using the svg element without namespace/xmlns stuff (I think it should work in 3.6).

    There are some issues with how much space it gives it to flow in; if you take that text down to one line you'll see the last in particular is getting clipped.


    Depending on your content, combining multiple box-shadows (inset and outset) and text-shadow could achieve a similar effect. The link above also contains a start on achieving a similar effect on text.

提交回复
热议问题