Как я могу сделать динамическую границу с градиентом, который меняется в зависимости от положения мыши ⇐ CSS

[Anonymous]

Мне интересно, можно ли редактировать свойство background-image в реальном времени с помощью JavaScript. То, что я пытаюсь сделать, имеет концепцию, аналогичную следующему вопросу:
Как изменить цвет фона в зависимости от положения мыши (определенные цвета)
Но вместо редактирования фона я редактирую границу, придавая ей 100% непрозрачность только в том углу, где находится курсор .
Метод CSS I пытался получить закругленную границу градиента следующим образом:
https://gist.github.com/stereokai/36dc0 ... 2ddc60d7a0
В JavaScript я использовал следующий метод ( использование jQuery 3.7.1 для определения положения мыши внутри элемента):

Код: Выделить всё

if(x = middle_y)
{
content.style.backgroundImage = "linear-gradient(#303030, #303030), radial-gradient(circle at bottom right, #8B686B, #00000000, #00000000);";
}

(содержимое — это элемент div, содержащий рамку).
Однако после тестирования выяснилось, что алгоритм не дал никакого эффекта, поскольку граница элемента оставалась статичной, даже несмотря на то, что алгоритм определил положение и угол, соответствующие положению курсора.
Поэтому после этого я подумал, что фоновое изображение нельзя редактировать в в реальном времени.
Следует ли мне попробовать другой метод CSS? Эта последняя мысль ошибочна?

Подробнее здесь: https://stackoverflow.com/questions/793 ... use-positi