怎么让css中在blur模糊的基础上让边缘变清晰

html-css020

怎么让css中在blur模糊的基础上让边缘变清晰,第1张

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

}

最简单的方式是直接给图片加个白色的边框：

<img src="images/123.jpg" style="border:3px solid #fff" />

想好看点的话在白边外再套一个模拟阴影的边框，这样更真实：

<div style="float:leftborder:1px solid border-color:#d0d0d0 #aaa #aaa #d0d0d0">

    <img src="images/123.jpg" style="display:blockborder:3px solid #fff" />

</div>

有几种可能：1、你背景图片没有处理好。2、背景图片是gif格式的，如果你的背景色不是白色的话，可以看到毛边。3、你要看下你的浏览是什么的，有些PNG-8的图片会有白边的，IE6不识别PNG透明图片，这个要做兼容。