Question

我附加一个img通过jQuery的元件和尝试添加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

您指定的模糊半径为50px。因此，如果一侧的图像尺寸大于50像素，则将不可见。一种更好的方式是使用2个值进行框阴影。

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

希望它会有所帮助。如果仍然不能解决问题，请分享屏幕截图。

Answer 2

我建议您遍历您的溢出属性。有时，如果容器不够大且您没有适当的可见性，则可能会被切断（例如盒子阴影）。即使你有什么设置为滚动，箱阴影不能算作“额外内容”的元素，因此使它不可滚动的。

Answer 3

.selectedImgStyle{
box-shadow: 0 0 50px rgba(255,0,0,0.6);
-moz-box-shadow: 0 0 50px rgba(255,0,0,0.6);
-webkit-box-shadow: 0 0 10px rgba(255,0,0,0.6);
-o-box-shadow: 0 0 50px rgba(255,0,0,0.6);
}

框阴影仅显示在图像的左侧

3 个答案: