title: how to limit box shadow spread not more than parent width and height
body: <p>i was wondering if box shadow spread and blur could limited to parent height and width? i am trying using z-index but i doesn't works.. any suggestion?</p>
  
  <p>i have images like this
  <a href="https://i.stack.imgur.com/isd9N.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/isd9N.png" alt="the image"></a></p>
  
  <p>is it possible to limit the spread not over the edges of images? thanks for your help..</p>
  
  <p>i was trying to change the index of the div inside the canvas tag (i changed the background image for future cropping)</p>
  
  <p>----------edit answer-------------
  HTML</p>
  
  <pre><code>&lt;div id="canvas" style="overflow: hidden; width: &lt;?php echo $resolution[0]; ?&gt;px; height: &lt;?php echo $resolution[1]; ?&gt;px; 
           background: url(&lt;?php echo base_url($image_loc); ?&gt;) no-repeat; background-repeat: no-repeat; 
           " class=""&gt;&lt;/div&gt;
  </code></pre>
  
  <p>JS</p>
  
  <pre><code>$('.rectangle').css('box-shadow', '' + 0 + ' ' + 0 + ' ' + '220px ' + '220px ' + '#000');
  </code></pre>
  
  <p>my workflow is when image loaded i started to click the image and create selection with js and aftar the button with icon crop up there clicked it draws the box shadow.. just add the <code>overflow: hidden</code></p>