Wie kann ich in CSS einen konkaven Randeffekt erstellen?

Verläufe verwenden, um einen konkaven Effekt zu erzeugen

In CSS ist border-radius ein leistungsstarkes Werkzeug zum Hinzufügen von Kurven zu den Kanten eines Elements. Es beschränkt sich jedoch auf die Erstellung konvexer Ränder, bei denen sich die Kurve nach außen wölbt. Was ist, wenn Sie einen konkaven Rand wünschen, bei dem die Kurve nach innen abfällt?

Beispiel: Konvexer Rand

<code class="css">#test {
    width: 200px;
    height: 200px;
    background: #888888;
    border-radius: 50px;
}</code>

Lösungsversuch

Um einen konkaven Rand zu erstellen, können Sie versuchen, negative Werte für den Randradius zu verwenden. Dieser Ansatz funktioniert jedoch nicht in CSS.

Lösung: Radiale Farbverläufe

Während Sie mit CSS allein keinen echten konkaven Rand erstellen können, können Sie ihn simulieren der Effekt mit radialen Farbverläufen. Mit Farbverläufen können Sie sanfte Übergänge zwischen Farben erstellen, und durch die Verwendung mehrerer Farbverläufe können Sie die Illusion einer geschwungenen Kante erzeugen.

Betrachten Sie das folgende Beispiel:

<code class="css">#test {
    width: 200px;
    height: 200px;
    background: #888888;
    background:
      radial-gradient(circle 20px at -20% 50%,transparent,transparent 100px,#888888 100px),
      radial-gradient(circle 20px at 120% 50%,transparent,transparent 100px,#888888 100px);
    background-size:100px 200px, 100px 200px;
    background-position:0 0,100% 0;
    background-repeat:no-repeat;
}</code>

Dieses CSS erstellt zwei radiale Farbverläufe, die sich überlappen und eine konkave Kante bilden. Der erste Farbverlauf beginnt mit einem transparenten Kreis bei -20 % und geht bei 100 % in eine Volltonfarbe #888888 über. Der zweite Gradient macht dasselbe, aber ab 120 %.

Das obige ist der detaillierte Inhalt vonWie kann ich in CSS einen konkaven Randeffekt erstellen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!