CSS3滤镜模糊定义边缘

本文介绍了CSS3滤镜模糊定义边缘的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述 我使用此代码模糊了一些图片 img { filter：blur（5px）; -webkit-filter：blur（5px）; -moz-filter：blur（5px）; -o-filter：blur（5px）; -ms-filter：blur（5px）; } 虽然图像的边缘模糊了。是否可以模糊图像，同时保持边缘定义？ 解决方案你可以把它放在< div> code>与 overflow：hidden; 并将< img> 输出 CSS img { filter：blur（5px）; -webkit-filter：blur（5px）; -moz-filter：blur（5px）; -o-filter：blur（5px）; -ms-filter：blur（5px）; margin：-5px -10px -10px -5px; } div { overflow：hidden; } HTML < div>< img src =http://placekitten.com/300/> < / div> I am blurring some images with this codeimg { filter: blur(5px); -webkit-filter: blur(5px); -moz-filter: blur(5px); -o-filter: blur(5px); -ms-filter: blur(5px);}The edges of the image get blurred too though. Is it possible to blur the image, while keeping the edges defined? Like an inset blur or something? 解决方案 You could put it in a <div> with overflow: hidden; and set the <img> to margin: -5px -10px -10px -5px;.Demo: OutputCSSimg { filter: blur(5px); -webkit-filter: blur(5px); -moz-filter: blur(5px); -o-filter: blur(5px); -ms-filter: blur(5px); margin: -5px -10px -10px -5px;}div { overflow: hidden;}​HTML<div><img src="http://placekitten.com/300" />​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​</div>​​​​​​​​​​​​ 这篇关于CSS3滤镜模糊定义边缘的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！