怎样用CSS样式制作边缘光晕的模糊效果

html-css015

怎样用CSS样式制作边缘光晕的模糊效果,第1张

1、首先新建一个简单的html文件，如图所示。

2、然后根据自己的需要，简单的设置一下层宽高和图片样式。

3、新建一个用于局部模糊的层，利用绝对定位和z-index使它浮动在图片上面，效果如果所示。

4、然后细调css的样式使它达到自己想要的效果，比如想让中间的S模糊。

5、最后预览下如下图所示，就完成了。

css中在blur模糊的基础上让边缘变清晰方法：

.blur {

-webkit-filter: blur(5px)

-moz-filter: blur(5px)

-o-filter: blur(5px)

-ms-filter: blur(5px)

filter: url(#blur-effect-1)

filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius='5')

zoom: 1

}