Question

我在这里有一个简单的jsfiddle示例http://jsfiddle.net/RQ4F2/1/

蓝色box-shadow实际上是溢出的，覆盖了一小部分元素，是不是可以成功呢？

那么元素在自己内部显示出完整的白色背景？

Answer 1

我猜测添加一个保证金并不是你所追求的，而是你想让圈子接触但没有淡化重叠。

要做到这一点，你可以有另一个内部跨度，在覆盖框阴影的情况下绝对定位：

 <span><span class="in">&nbsp;</span></span>

 span.in{
         position:absolute;
         box-shadow:inset 0px 0px 0px 0px;
         /*compensate for outer span's padding*/
         margin-left:-20px;  margin-top:-20px;
        }

Answer 2

不应为跨度设置box-shadow，而应为跨度的某些伪元素设置box-shadow（例如:before）。这样，您可以使用box-shadow将z-index放在后面，跨度将位于顶部并覆盖box-shadow：

span {
  width:100px;
  padding:20px;
  float:left;
  border-radius:100%;
  height:100px;
  background:white;    
  position:relative;    
}
span:before {
  content:'';
  position:absolute;
  width:100%;
  height:100%;
  border-radius:50%;
  left:0; top:0;
  background:white;  
  box-shadow:0px 0px 20px 4px blue;
  z-index:-1;
}

Demo

Answer 3

我通过将margin: 10px添加到span标记来更新CSS。为了在元素之间获得更多空间，请提高边距。

您可以找到更新的jsfiddle here

CSS box-shadow溢出元素

3 个答案:

Demo