如何限制盒子阴影传播不超过父宽度和高度

Question

我想知道盒子阴影的扩散和模糊是否可以限制在父级的高度和宽度上？我正在尝试使用 z-index 但我不起作用..有什么建议吗？

我有这样的图片

是否可以限制扩散不超过图像的边缘？谢谢你的帮助..

我试图更改 canvas 标签内 div 的索引（我更改了背景图片以供将来裁剪）

------------编辑答案------------ HTML

<div id="canvas" style="overflow: hidden; width: <?php echo $resolution[0]; ?>px; height: <?php echo $resolution[1]; ?>px; 
         background: url(<?php echo base_url($image_loc); ?>) no-repeat; background-repeat: no-repeat; 
         " class=""></div>

JS

$('.rectangle').css('box-shadow', '' + 0 + ' ' + 0 + ' ' + '220px ' + '220px ' + '#000');

我的工作流程是当图像加载时，我开始单击图像并使用 js 创建选择，然后在底部弹出带有图标的按钮，单击它绘制框阴影..只需添加 overflow: hidden

Answer 1

您需要在 parent class 上添加 overflow:hidden。

这里有一些 overflow:hidden 的例子：

.wrapper{
/*A little bit of styling on the wrapper...*/
  display: inline-block;
  margin: 20px;
  float : left;
  padding: 20px;
  border : 1px solid black;
}

.oh
{
 overflow: hidden;
}

.picture{
  padding: 10px;
  border : 1px solid red;
  box-shadow: 0 0 100px 10px  red;
}

<div class="wrapper oh">
  <div class="picture">Example with overflow:hidden on the parent class (.wrapper)</div>
</div>

<div class="wrapper">
  <div class="picture">Example without overflow:hidden on the parent class (.wrapper)</div>
</div>

如何限制盒子阴影传播不超过父宽度和高度

how to limit box shadow spread not more than parent width and height

javascript

jquery

css

image

box-shadow