如何使用幻灯片中的框阴影来柔化/羽化图像边缘？

Question

我有一个图像滑块。为了有一个视图我想要显示滚动时羽化的图像边缘。

我曾尝试使用box-shadow属性，但它对我没有帮助。可以使用图像编辑器对图像边缘进行羽化。但我不希望这样。

我在<div class="insetShadow">旁边添加了额外的<img>。

<div class="item">
    <img src="images/01.jpg" alt="" />
    <div class="insetShadow"></div>
</div>

.insetShadow
{
    width: 100%;
    height: 100%;
    top:0;
    left:0;
    position:relative;
    box-shadow: inset 0px 0px 13px 5px #fff;
    z-index: 20;
}

.carousel  img
{
    width: auto;
    height: 300px;
    max-height: 300px;
    margin: 0 auto;
    position: relative;
    z-index: 19;

}

启用box-shadow功能后，

img不适用于inset元素。

在左上角的图片中，您可以看到实际视图和右下方的所需视图。 那个或任何jQuery插件还有其他css解决方案吗？

Answer 1

尝试使用至少一半模糊半径的spread radius：

box-shadow: inset 0 0 12px 6px #fff;

Demo

Answer 2

您可以使用此生成器正确搞乱盒子阴影。它只是CSS并使用jQuery将其附加到幻灯片元素。

Check this and work around!