Wie erstelle ich in CSS mit Box-Shadow invertierte geschwungene Ecken?

Umgekehrte gewölbte Ecken mit CSS erstellen

In Ihrem aktuellen CSS-Code möchten Sie umgekehrt gewölbte Ecken erstellen. Der bereitgestellte Code nutzt den Randradius, um einen abgerundeten Eckeneffekt zu erzielen. Um jedoch einen konkaven Radius zu erstellen, können wir die Box-Shadow-Eigenschaft nutzen.

Die Technik umfasst die folgenden Schritte:

1. Erstellen Sie ein transparentes Quadrat mit ausgeblendetem Überlauf mithilfe von CSS.
2. Fügen Sie mithilfe eines Kastenschattens einen transparenten Kreis zum Quadrat hinzu.
3. Positionieren Sie den Kreis strategisch so, dass nur ein Viertel davon sichtbar ist Umfang.

Dieser Ansatz bietet eine Lösung für die Erstellung konkaver Ecken. Unten ist ein Beispielausschnitt zur Veranschaulichung der Methode:

 position: relative;<br> width: 200px;<br> height: 50px;<br> background-color: blue;<br> Randradius: 9999px 0 0 9999px;<br> Rand: 30px;<br> text-align: center;<br> color: #fff;<br> padding-top: 10px;<br>}</p><h1>top,</h1><h1>bottom {</h1><p>Position: absolut;<br> Höhe: 30px;<br> Breite: 30px;<br>rechts: 0;<br>Überlauf: versteckt;<br>}</p><h1>oben {</h1><p>oben: -30px;<br>}</p><h1>unten {</h1><p>unten: -30px;<br>}</p><h1>top::before,</h1><h1>bottom::before {</h1><p>content: '';<br> position: absolute;<br> rechts: 0;<br> Höhe: 200 %;<br> Breite: 200 %;<br> border-radius: 100%;<br> box-shadow: 10px 10px 5px 100px blue;<br> z-index: -1;<br>}</p><h1>top::before {</h1><p>oben: -100%;<br>}

In diesem Code kombinieren wir das Quadrat mit dem ausgeblendeten Überlauf und den Kreis mit dem Kastenschatten, um den gewünschten konkaven Radiuseffekt zu erzielen.

Das obige ist der detaillierte Inhalt vonWie erstelle ich in CSS mit Box-Shadow invertierte geschwungene Ecken?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!