Ausführliche Erklärung, wie man in CSS3 konkav abgerundete Ecken erreicht

Jeder muss in der Lage sein, abgerundete Ecken und einen Randradius zu erstellen. Wie erreicht man konkav abgerundete Ecken? In diesem Artikel wird hauptsächlich der Beispielcode zur Realisierung konkaver abgerundeter Ecken in CSS3 vorgestellt. Der Herausgeber findet ihn recht gut, daher werde ich ihn jetzt mit Ihnen teilen und als Referenz verwenden. Folgen wir dem Herausgeber, um einen Blick darauf zu werfen. Ich hoffe, es hilft allen.

Sie können einen weißen runden Kasten verwenden, um den größten Teil des quadratischen Kastens abzudecken. Wenn sich jedoch der Hintergrund ändert, müssen Sie die Farbe des Abdeckkastens ändern, oder der Hintergrund ist ein Farbverlauf ist schwieriger zu ändern, oder der Hintergrund ist ein Bild usw., es ist einfach nicht einfach, es zu ändern. Um es ganz klar auszudrücken: Nachdem der abgedeckte Teil undurchsichtig ist, ist die Anpassungsfähigkeit nicht stark.

Hier stellen wir eine konkave Verrundung mit radialem Farbverlauf vor, die die oben genannten Probleme lösen kann. Mit CSS können Sie eine konkave Verrundung mit transparentem Hintergrund generieren.

1. Grundlegender linearer Farbverlauf

p {
 height:100px;
 width:200px;
 background-image:linear-gradient(90deg,red,blue);
}
<p>从左到右的红到蓝渐变</p>

2. Fügen Sie einen Prozentsatz hinzu, um den Farbverlaufsbereich anzupassen

 p {
 height:100px;
 width:200px;
 background-image:linear-gradient(90deg,red 20%,blue 80%);
}
<p></p>

3. Konzentrieren Sie den Verlaufsbereich, bis sie sich überlappen und zwei durch Rot und Blau getrennte Farbblöcke bilden

 p {
 height:100px;
 width:200px;
 background-image:linear-gradient(90deg,red 50%,blue 50%);
}
 <p></p>

4. Die Farbe kann auf transparent eingestellt werden. Wenn Sie Rot auf Transparent ändern, können Sie nur blaue Farbblöcke sehen.

 p {
 height:100px;
 width:200px;
 background-image:linear-gradient(90deg,transparent 50%,blue 50%);
}

<p></p>

5. Stellen Sie sich den radialen Farbverlauf auf die gleiche Weise vor, verkleinern Sie auch den Farbverlaufskreis, bis er überlappt, und stellen Sie die Farbe nahe ein die Mitte des Kreises transparent machen.

 /* 径向渐变主体 */ 
.raidal {
 height:100px;
 width:100px;
 background:radial-gradient(transparent 50%,blue 50%);
}
 <p class=&#39;raidal&#39;></p>

6. Der Radialverlauf kann die Mittelposition des Radiuskreises festlegen, also auf die linke obere Ecke, links oben und Passen Sie die Radiusgröße auf 200 Pixel an. Ich habe festgestellt, dass die konkaven abgerundeten Ecken mit transparentem Hintergrund realisiert wurden.

Beim Auftragen können Sie Pseudoelemente verwenden, dann die absolute Positionierung verwenden, die Position anpassen und sie zum gewünschten Effekt kombinieren

 /* 径向渐变主体 */ 
.raidal1 {
 height:100px;
 width:100px;
 background:radial-gradient(200px at left top,transparent 50%,blue 50%);
}
<p class=&#39;raidal1&#39;></p>

7. Passen Sie auf die gleiche Weise einfach die Mittelposition des Kreises an

 /* 左上 */ 
.raidal1 {
 height:100px;
 width:100px;
 background:radial-gradient(200px at left top,transparent 50%,blue 50%);
}
/* 右上 */ 
.raidal2 {
 height:100px;
 width:100px;
 background:radial-gradient(200px at right top,transparent 50%,blue 50%);
}
/* 右下 */ 
.raidal3 {
 height:100px;
 width:100px;
 background:radial-gradient(200px at right bottom,transparent 50%,blue 50%);
}
/* 左下 */
 .raidal4 {
 height:100px;
 width:100px;
 background:radial-gradient(200px at left bottom,transparent 50%,blue 50%);
} 
<p class=&#39;raidal1&#39;></p> 
<p class=&#39;raidal2&#39;></p>
 <p class=&#39;raidal3&#39;></p>
 <p class=&#39;raidal4&#39;></p>

8 Ich möchte dies nicht tun. Abgerundete Ecken können auch elliptisch sein, und der Radius wird auf zwei Parameter eingestellt, was einer Ellipse entspricht.

 /* 左上 */ 
.ellipse {
 height:100px;
 width:100px;
 background:radial-gradient(200px 300px at left top,transparent 50%,blue 50%);
}
 <p class=&#39;ellipse&#39;></p>

Der radiale Farbverlauf hat viele Parameter, die Sie selbst anpassen können. Es können verschiedene seltsame Formen auftreten, die hier nicht gezeigt werden. Relativ gesehen reichen konkav abgerundete Ecken aus.

Verwandte Empfehlungen:

So erstellen Sie abgerundete Ecken in CSS3

Verwenden Sie CSS-Code geschickt, um eine abgerundete Tabelle zu erstellen

Eine Zusammenfassung der Verwendung abgerundeter CSS3-Ecken und abgerundeter Ränder

Das obige ist der detaillierte Inhalt vonAusführliche Erklärung, wie man in CSS3 konkav abgerundete Ecken erreicht. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!