我使用2个盒子阴影来模仿聚光灯效果。但阴影之间有一条奇怪的白线?
为什么会发生这种事?怎么去掉?
这是垃圾箱:聚光灯效果
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
我认为没有一个好的解决方案可以跨浏览器方式隐藏此转换。
可能一种可能性是使 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>
您可以通过添加另一个 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://css-tricks.com/clipping-masking-css/#aa-masking
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="170" height="200">
<defs>
<filter id="filter">
<feGaussianBlur stdDeviation="5" />
</filter>
<mask id="mask">
<ellipse cx="50%" cy="50%" rx="25%" ry="25%" fill="white" filter="url(#filter)"></ellipse>
</mask>
</defs>
<image xlink:href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/Harry-Potter-1-.jpg" width="170" height="200" mask="url(#mask)"></image>
</svg>