Удалить зазор между внутренней и внешней рамками-тенями - PullRequest
Новая
       26

Удалить зазор между внутренней и внешней рамками-тенями

0 голосов
/ 18 февраля 2019

У меня есть внутренний и внешний box-shadows на элементе .cursor для достижения маскирующего светового эффекта.Как убрать пробел между ними?

enter image description here

const r = 75;
let cursor = document.querySelector(".cursor");

document.onmousemove = function(e) {
  let suggestedX = e.clientX - r;
  if ((suggestedX + 2.1 * r) < window.innerWidth && suggestedX > 0) {
    cursor.style.left = suggestedX + "px";
  }

  let suggestedY = e.clientY - r;
  if ((suggestedY + 2.1 * r) < window.innerHeight && suggestedY > 0) {
    cursor.style.top = suggestedY + "px";
  }
};
body {
  background: black;
  background: salmon;
  overflow: hidden;
}

.cursor {
  position: absolute;
  background: transparent;
  border-radius: 50%;
  width: 150px;
  height: 150px;
  left: 50%;
  top: 50%;
  box-shadow: inset 0 0 15px 20px rgba(0, 0, 0, 0.8), 0 0 0 4000px rgba(0, 0, 0, 0.8);
  z-index: 1;
}

.text {
  opacity: 1;
  font-family: Courier;
  color: #ccc;
  word-break: break-word;
}
<div class="cursor"></div>
<div class="text"></div>
...