Html 通过css模糊图像边界
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18613441/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Blur borders on image via css
提问by sealla
I'm trying to do something like this:
我正在尝试做这样的事情：
I think it could be done using background image and another image (mask) above it with a transparent center. But is it possible to do the same with pure css?
我认为可以使用背景图像和其上方具有透明中心的另一个图像（蒙版）来完成。但是可以用纯 css 做同样的事情吗？
回答by Jamie Hutber
Whilst you can't apply a box-shadowdirectly to an image you could apply it with a :before or :after
虽然您不能将 abox-shadow直接应用于图像，但您可以将其应用于:before or :after
.shadow
{
display:block;
position:relative;
}
img {
width: 100%;
height: 100%;
}
.shadow:before
{
display:block;
content:'';
position:absolute;
width:100%;
height:100%;
-moz-box-shadow:inset 0px 0px 3px 1px rgba(0,0,0,1);
-webkit-box-shadow:inset 0px 0px 3px 1px rgba(0,0,0,1);
box-shadow:inset 0px 0px 3px 1px rgba(0,0,0,1);
} <div class="shadow">
<img src="http://lorempixel.com/400/200/" />
</div>回答by Vladimir
Yess it's possible like this:
是的，它可能是这样的：
.img {
border:1px solid black;
}
.img:hover {
border: none;
box-shadow: 0 0 10px black inset;
}
