使用 CSS 对图像应用柔化边缘

Question

给定一张图片，有没有办法使用 css 柔化边缘？或者通过一些 js 库（尽管 css 是首选）？这个想法是图像的边缘应该模糊成透明的，这样它们就能更好地融入背景。

示例，原始图像：

具有柔化边缘的图像：

在 Whosebug 上有许多类似的问题，但是 none（我能找到）提供了一个答案来做到这一点。他们大多关心模糊整个图像，或在图像上设置半透明边框，这都不是我要找的。

Answer 1

你可以试试：fiddle

<div class="shadow">
        <img src="http://via.placeholder.com/350x150/" />
</div>

和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);
}

Answer 2

您可以尝试这样的操作：

JSFiddle Example

HTML :

<div id="image-container"><div>

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;
}

使用 CSS 对图像应用柔化边缘

Apply soft edges to image using CSS

html

css

gradient

image

opacity