Нужно сделать примерно как тут: Как сделать просвечивание через текст свечением, исходящим от курсора?, но чтобы градиент просвечивался через стандартную border-рамку (или какой-нибудь элемент, ее имитирующий). Вопрос в том, как же это сделать в плане стилей и структуры (что по дополнительным элементам, если они нужны). Заведомо рад любым ответам. Спасибо!
Основываясь на связанном ответе - переносим все стили и манипуляции на псевдоэлемент, делаем его чуть больше (на нужную толщину рамки) и ставим позади родителя.
document.querySelector('.wrapper').addEventListener('mousemove', function(ev) {
this.style.setProperty('--y', `${ev.offsetY - this.clientHeight}px`);
this.style.setProperty('--x', `${ev.offsetX - this.clientWidth}px`);
});body { display: flex; justify-content: center; background-color: #000f; }
.wrapper {
position: relative;
padding: 20px;
border-radius: 0 20px;
font: bold 72px/1em Arial;
text-align: center;
color: #ddd; background-color: #000;
}
.wrapper::before {
content: '';
position: absolute;
top: -3px; left: -3px; z-index: -1;
height: calc(100% + 6px); width: calc(100% + 6px);
border-radius: inherit;
background: var(--x, 0) var(--y, 0) / 200% 200%
radial-gradient(circle at center, #ff0f, #f00f, #ff00 2em) no-repeat #111;
transition: .25s linear;
}<div class="wrapper">BACKLIGHT<br>BORDER</div>