使用CSS3滤镜模糊定义边缘
我用这段代码模糊了一些图像
img { filter: blur(5px); -webkit-filter: blur(5px); -moz-filter: blur(5px); -o-filter: blur(5px); -ms-filter: blur(5px); } 尽pipe如此，图像的边缘也会变得模糊。 是否可以模糊图像，同时保持边缘定义？ 像一个插图模糊或什么的？
你可以把它放在一个带有overflow: hidden;的<div> overflow: hidden; 并将<img>设置为margin: -5px -10px -10px -5px; 。
演示： 
产量
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>
我能够用这个工作
transform: scale(1.03);
应用于图像的属性。 出于某种原因，在Chrome上，如果有相对定位的父元素，则提供的其他解决scheme将不起作用。
检查http://jsfiddle.net/ud5ya7jt/
这样，图像将被稍微放大3％，并且边缘将被裁剪，这对于模糊的图像应该不是问题。 它在我的情况很好，因为我使用高分辨率的图像作为背景。 祝你好运！
我使用了-webkit-transform: translate3d(0, 0, 0); overflow:hidden; 。
DOM：
<div class="parent"> <img class="child" src="http://placekitten.com/100" /> </div>
CSS：
.parent { width: 100px; height: 100px; overflow: hidden; -webkit-transform: translate3d(0, 0, 0); } .child { -webkit-filter: blur(10px); }
DEMO： http : //jsfiddle.net/DA5L4/18/
这项技术适用于Chrome34和iOS7.1
更新
如果您使用最新版本的Chrome，则无需使用-webkit-transform: translate3d(0, 0, 0); 黑客攻击。 但它不适用于Safari（webkit）。
你也可以保留整个video，你不必切掉一些东西。
您可以在白色模糊的边缘上覆盖阴影。
这看起来非常好，以及:)
只需将此代码粘贴到您的video的父级：
.parent { -webkit-box-shadow: inset 0 0 200px #000000; -moz-box-shadow: inset 0 0 200px #000000; box-shadow: inset 0 0 200px #000000; }
在许多情况下，可以使IMG 位置：绝对 ，您可以使用剪辑来隐藏模糊的边缘 – 外部的DIV是不必要的。
img { filter: blur(5px); -webkit-filter: blur(5px); -moz-filter: blur(5px); -o-filter: blur(5px); -ms-filter: blur(5px); position: absolute; clip: rect(5px,295px,295px;5px); }
将图片插入到position: relative; 和overflow: hidden;
HTML
<div><img src="#"></div>
CSS
div { position: relative; overflow: hidden; } img { filter: blur(5px); -webkit-filter: blur(5px); -moz-filter: blur(5px); -o-filter: blur(5px); -ms-filter: blur(5px); }
这也适用于可变大小的元素，如dynamicdiv。
只是提示接受的答案，如果您使用绝对位置，负边界将不起作用，但您仍然可以将顶部，底部，左侧和右侧设置为负值，并使父元素溢出隐藏。
如果您不知道图像大小，将剪辑添加到绝对图像位置的答案会有问题。
自己今天解决了这个问题，我想提出一个解决scheme，（目前）在主stream浏览器上运行。 在这个页面上的其他一些答案确实有一次工作，但最近的更新，无论是浏览器或操作系统，已经无效的大部分/所有这些答案。
关键是把图像放在一个容器中，并进行转换：将容器从溢出中缩放：隐藏的父级。 然后，将模糊应用于容器内的img，而不是容器本身。
工作小提琴： https ： //jsfiddle.net/x2c6txk2/
HTML
<div class="container"> <div class="img-holder"> <img src="https://unsplash.it/500/300/?random"> </div> </div>
CSS
.container{ width: 90%; height:400px; margin: 50px 5%; overflow:hidden; position:relative; } .img-holder{ position:absolute; left:0; top:0; bottom:0; right:0; transform:scale(1.2,1.2); } .img-holder img{ width:100%; height:100%; -webkit-filter:blur(15px); -moz-filter:blur(15px); filter:blur(15px); }
您可以尝试在其他元素上添加边框：
DOM：
<div><img src="#" /></div>
CSS：
div { border: 1px solid black; } img { filter: blur(5px); }
您可以通过剪切图像并应用将模糊效果设置为0像素的包装元素来阻止图像重叠其边缘。 这是它的样子：
HTML
<div id="wrapper"> <div id="image"></div> </div>
CSS
#wrapper { width: 1024px; height: 768px; border: 1px solid black; // 'blur(0px)' will prevent the wrapped image // from overlapping the border -webkit-filter: blur(0px); -moz-filter: blur(0px); -ms-filter: blur(0px); filter: blur(0px); } #wrapper #image { width: 1024px; height: 768px; background-image: url("..http://img.dovov.comcats.jpg"); background-size: cover; -webkit-filter: blur(10px); -moz-filter: blur(10px); -ms-filter: blur(10px); filter: blur(10px); // Position 'absolute' is needed for clipping position: absolute; clip: rect(0px, 1024px, 768px, 0px); }
我发现，在我的情况下，我不必添加包装。
我刚刚添加 –
margin: -1px;
要么
margin: 1px; // any non-zero margin overflow: hidden;
我模糊的元素是绝对定位的。
如果您使用的是背景图片，我发现的最好方法是：
filter: blur(5px); margin-top: -5px; padding-bottom: 10px; margin-left: -5px; padding-right: 10px;
这是我想出的解决scheme保持100％的形象，不需要作物：
基本上，我用3×3的网格对图像进行平铺，然后模糊一切，然后在中心图像上进行有效地放大以创build像重复边缘，当模糊后的效果时，有点奇怪css3没有像内置的重复边缘。
链接到方法/代码： 如何使用CSS3模糊图像而不裁剪或淡化边缘？
