Html 使用 CSS 将软边缘应用于图像
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/29315635/
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
Apply soft edges to image using CSS
提问by mcProgrammer
Given an image, is there a way to soften the edges using css? Or through some js library (although css would be preferred)? The idea is that the edges of the image should blur into transparency, so they fit in better with the background.
给定一个图像，有没有办法使用 css 柔化边缘？或者通过一些 js 库（虽然 css 是首选）？这个想法是图像的边缘应该模糊成透明，所以它们更适合背景。
Example, original image:
示例，原始图像：
Image with softened edges:
边缘软化的图像：
There are many similar questions asked on stackoverflow, however none (that I can find) offer an answer to do exactly this. Mostly they're concerned with blurring the whole image, or setting a semi-transparent border on the image, neither being what I'm looking for.
在stackoverflow上有很多类似的问题，但是没有一个（我能找到）提供一个答案来做到这一点。大多数情况下，他们担心模糊整个图像，或在图像上设置半透明边框，这都不是我想要的。
回答by Konrud
You can try something like this:
你可以尝试这样的事情：
HTML :
HTML :
<div id="image-container"><div>
CSS:
CSS：
#image-container {
background: url(http://pic2.ooopic.com/11/26/30/31b1OOOPIC48.jpg) left top no-repeat;
box-shadow: 25px 25px 50px 0 white inset, -25px -25px 50px 0 white inset;
width: 300px;
height: 300px;
}
回答by fcastillo
You can try that: fiddle
你可以试试：小提琴
<div class="shadow">
<img src="http://via.placeholder.com/350x150/" />
</div>
And CSS.
和CSS。
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 6px 6px rgba(255,255,255,1);
-webkit-box-shadow:inset 0px 0px 6px 6px rgba(255,255,255,1);
box-shadow:inset 0px 0px 6px 6px rgba(255,255,255,1);
}
