Codeanzeige: Verwenden Sie CSS3, um konkav abgerundete Ecken zu erzielen

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 Editor und schauen wir uns

Filetieren an, jeder muss es können, Randradius, wie erreicht man konkaves Filetieren?

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 einstellen und anpassen Radiusgröße nach links oben 200 Pixel, ich habe festgestellt, dass die konkaven abgerundeten Ecken mit transparentem Hintergrund realisiert wurden.

Sie können beim Auftragen 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. Wenn Sie dies nicht tun möchten, können abgerundete Ecken auch elliptisch sein, und der Radius wird auf zwei Parameter eingestellt, was einer Ellipse entspricht.

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

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

Das obige ist der detaillierte Inhalt vonCodeanzeige: Verwenden Sie CSS3, um konkav abgerundete Ecken zu erzielen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!