Я ищу динамическую закругленную рамку с градиентом прозрачности. ⇐ CSS

[Anonymous]

Мне интересно, можно ли редактировать свойство background-image в реальном времени с помощью JavaScript. То, что я пытаюсь сделать, имеет концепцию, аналогичную следующему вопросу:
Как изменить цвет фона в зависимости от положения мыши (определенные цвета)
но вместо редактирования фона я редактирую границу, придавая ей 100% непрозрачность только в том углу, где находится курсор.
Метод CSS, который я пробовал чтобы получить закругленную границу градиента, выполните следующие действия:
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 ... y-gradient