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

Posted 2023-05-08

【中文标题】box-shadow 仅显示在图像的左侧

【英文标题】：box-shadow showing up to the left side of an image only

【发布时间】：2019-06-26 09:38:42

【问题描述】：

我正在通过 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>

【问题讨论】：

这是由#collection 上的溢出引起的。除了在img 中添加一些margin 来为box-shadow 留出空间，您无能为力

【参考方案1】：

您已指定 50 像素的模糊半径。因此，如果一侧的图像尺寸超过 50 像素，它将不可见。更好的方法是使用 2 个值作为框阴影。

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

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

【讨论】：

你可以通过编辑sn-p看到这并没有达到同样的效果。

【参考方案2】：

我建议使用您的 overflow 属性。有时，如果容器不够大并且您没有适当的可见性，则可能会被切断（例如 box-shadow 的）。即使您设置了要滚动的内容，box-shadow 也不会算作元素的“额外内容”，因此使其不可滚动。

【参考方案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);