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

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

您需要在您的父类上添加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>