J'utilise 2 box-shadow pour imiter l'effet de projecteur. Mais avez-vous une ligne blanche bizarre entre les ombres?Comment se débarrasser de la ligne blanche bizarre entre 2 box-shadow?
Pourquoi cela est-il arrivé? Comment s'en débarrasser?
Voici le bac: Spotlight Effect
UA: Mozilla/5.0 (Macintosh, Intel Mac OS X 10_11_5) AppleWebKit/537,36 (KHTML, comme Gecko) Chrome/Safari 52.0.2743.116/537,36
Je ne pense pas qu'il y ait une bonne solution pour cacher cette transition d'une manière transversale navigateur.
Peut-être un acceuillent de faire le chemin div plus et utilisez seulement une ombre encart:
.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 {
\t position: absolute;
\t top: 0px; \t
\t left: 0px;
\t height: 300px;
\t width: 300px;
}<div class="theimg"></div>
<div class="overlay"></div>Vous pouvez le résoudre en ajoutant une autre déclaration 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/
En Chrome affiche un peu différent. Le mieux est de travailler avec des couleurs ou de régler la transparence: