如何摆脱2箱阴影之间奇怪的白线？

Question

我使用2个盒子阴影来模仿聚光灯效果。但阴影之间有一条奇怪的白线？

为什么会这样？如何摆脱它？

这是bin：Spotlight Effect

UA：Mozilla / 5.0（Macintosh; Intel Mac OS X 10_11_5）AppleWebKit / 537.36（KHTML，与Gecko一样）Chrome / 52.0.2743.116 Safari / 537.36

Answer 1

您可以通过添加另一个box-shadow声明来解决它：

在FF中：

def merge_sort list
  if list.length <= 1
    list
  else
    mid = (list.length / 2).floor
    left = merge_sort(list[0..mid - 1])
    right = merge_sort(list[mid..list.length])
    merge(left, right)
  end 
end 

def merge(left, right)
  if left.empty?
    right
  elsif right.empty?
    left
  elsif left.first < right.first
    [left.first] + merge(left[1..left.length], right)
  else
    [right.first] + merge(left, right[1..right.length])
  end
end 

<强> https://jsfiddle.net/sLpx6eL7/

在Chrome中，它显示的有点不同。最好使用纯色或调整透明度：

<强> https://jsfiddle.net/sLpx6eL7/1/

Answer 2

我认为没有一个很好的解决方案可以跨浏览器方式隐藏这种转换。

可能是一个可能性是使div方式更大，并且只使用插入阴影：

.overlay {
  position: absolute;
  left: 150px;
  top: 150px;
  width: 2000px;
  height: 2000px;
  border-radius: 50%;  

  box-shadow: 0px 0px 24px 930px rgba(0,0,0,0.5) inset;
  transform: translate(-1000px, -1000px);
}

body {
   overflow: hidden;
}

.theimg {
	position: absolute;
	top: 0px;	
	left: 0px;
	height: 300px;
	width: 300px;
}

<div class="theimg"></div>
<div class="overlay"></div>