jquery - box-shadow 仅显示在图像的左侧

Question

我正在通过 jQuery 附加一个 img 元素，并尝试在单击事件时向图像的所有边添加一个 box-shadow。但是阴影只出现在图像的左侧。如何在图像的所有边上添加阴影？

var someNumbers = [1, 2, 3];

$.each(someNumbers, function(index, element) {
  $('#collection').append('<img src="' + someNumbers[index] + '"/>');
});

$('#collection img').on({
  click: function() {
    $('#mainImage').attr('src', $(this).attr('src'));
    $(this).addClass('selectedImgStyle');
  }
});

#collection {
  position: absolute;
  height: 100px;
  width: 500px;
  left: 50%;
  transform: translate(-50%);
  margin-top: 2%;
  display: inline-block;
  white-space: nowrap;
  border-radius: 20px;
  overflow: visible;
  overflow-x: scroll;
}

#collection img {
  height: 100px;
  width: 100px;
  cursor: pointer;
}

.selectedImgStyle {
  box-shadow: 0px 0px 50px red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="collection"></div>

Answer 1

您指定的模糊半径为 50 像素。所以，如果一侧的图像大小超过 50px，它将不可见。更好的方法是对框阴影使用 2 个值。

box-shadow: 2px 2px 2px red, -2px -2px 2px red;

希望对您有所帮助。如果这不能解决问题，请分享屏幕截图。