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

Question

我有一个图像 slider 。为了获得射击视角，我想在滚动时显示图像边缘羽化。

我试过使用 box-shadow属性(property)，但这对我没有帮助。可以使用图像编辑器羽化图像边缘。但我不想那样。

我添加了额外的 <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 时的元素功能已启用。

在左上角的图片中，您可以看到实际 View ，而在右下角的图片中，您可以看到所需的 View 。是否有任何其他 css 解决方案或任何 jQuery 插件？

Answer 1

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

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

Demo