Ich suche einen dynamischen abgerundeten Rand mit Transparenzverlauf ⇐ CSS

[Guest]

Ich frage mich, ob die Eigenschaft „Hintergrundbild“ in Echtzeit über JavaScript bearbeitet werden kann. Was ich versuche, hat ein ähnliches Konzept wie die folgende Frage:
Wie ändere ich das? Farbe des Hintergrunds basierend auf der Mausposition (spezifische Farben)
Aber anstatt den Hintergrund zu bearbeiten, bearbeite ich den Rand und gebe ihm nur in der Ecke, in der sich der Cursor befindet, 100 % Deckkraft.
Die CSS-Methode, die ich ausprobiert habe Den abgerundeten Verlaufsrand zu erhalten, ist wie folgt:
https://gist.github.com/stereokai/36dc0 ... 2ddc60d7a0
In JavaScript war die Methode, die ich durchgeführt habe, wie folgt (mit jQuery 3.7.1 zur Erkennung der Mausposition innerhalb des Elements):

Code: Select all

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

(Inhalt ist das div-Element, das den Rahmen enthält).
Aber nach dem Testen scheint es, dass der Algorithmus keine Wirkung hatte, ebenso wie das Element Der Rand blieb statisch, obwohl der Algorithmus die Position und Ecke erkannte, die der Cursorposition entsprachen.
Danach dachte ich, dass das Hintergrundbild nicht in Echtzeit bearbeitet werden kann .
Soll ich eine andere CSS-Methode ausprobieren? Ist dieser letzte Gedanke falsch?
Vielen Dank