如何摆脱 2 个盒子阴影之间的奇怪白线？答案

【问题标题】：How to get rid off weird white line between 2 box-shadow?如何摆脱 2 个盒子阴影之间的奇怪白线？
【发布时间】：2016-09-04 04:12:50
【问题描述】：

我使用 2 个 box-shadow 来模拟聚光灯效果。但是阴影之间有一条奇怪的白线？

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

这是垃圾箱：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

【问题讨论】：

标签： css box-shadow

【解决方案1】：

我不认为有一个很好的解决方案可以跨浏览器隐藏这个过渡。

一种可能性是让 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>

【讨论】：

【解决方案2】：

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

在FF中：

box-shadow: 
    0 0 24px 30px rgba(0,0,0,0.5) inset, 
    0 0 100px 1000px rgba(0,0,0,0.5),
    0 0 0 rgba(0,0,0,0.5) inset;
}

https://jsfiddle.net/sLpx6eL7/

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

https://jsfiddle.net/sLpx6eL7/1/

【讨论】：