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

问题: 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? i have images like...

问题:

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?

i have images like this the image

is it possible to limit the spread not over the edges of images? thanks for your help..

i was trying to change the index of the div inside the canvas tag (i changed the background image for future cropping)

----------edit answer------------- 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');

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 overflow: hidden


回答1:

You need to add overflow:hidden on your parent class.

Here are some examples with 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>

  • 发表于 2018-07-11 05:24
  • 阅读 ( 274 )
  • 分类:sof

条评论

请先 登录 后评论
不写代码的码农
小编

篇文章

作家榜 »

  1. 小编 文章
返回顶部
部分文章转自于网络,若有侵权请联系我们删除