Problem mit "Gooey" CSS SVG -Filter für abgerundeten Texthintergrund für die Arbeit in Firefox ⇐ CSS

[Anonymous]

Ich habe versucht, den folgenden abgerundeten Hintergrundeffekt nachzubilden, der in diesem Dribble -Design gefunden wurde:
< /p>
Durch einige Untersuchungen fand ich heraus, dass es als klebriger Effekt bezeichnet wurde. Ich habe versucht, diesen [Texthintergrund mit Gooey -Filter] (Texthintergrund mit Gooey -Filter) und Gooey -Texthintergrund mit SVG -Filtern zu implementieren, aber sie funktionieren nicht auf Firefox. Ich suche nach dem abgerundeten inneren Ecke Effekt , das auf Chrom angezeigt wird. "Lang-html PrettyPrint-Override">
I just want to smile and live life and enjoy every moment while I still have it.











< /code>
@import url('https://fonts.googleapis.com/css2?famil ... splay=swap');

body {
font-family: 'Manrope', sans-serif;
font-weight: 500;
font-size: 3em;
margin: auto;
margin-top: 50px;
max-width: 25ch;
}

p {
display: inline;
position: relative;
padding: 0.5em;
line-height: 1.3;
background: #D1FB96;
border-radius: 30px;
box-decoration-break: clone;
-webkit-box-decoration-break: clone;
filter: url('#gooey-filter');
}

span:focus {
outline: 0;
}
< /code>
Auf Chrombasis-Browsern sieht es so aus: (Beachten Sie die abgerundete innere Ecke < /strong>)

Auf Firefox sieht es so aus: (scharfe innere Kanten)

Ich bin mir bewusst Revisited, aber ich bin mir nicht sicher, wie ich die Änderungen an einem textbasierten Beispiel implementieren kann, um diese abgerundete innere Ecke zu erhalten.>