Teilen Sie einen Artikel mit CSS3, um einen konkaven abgerundeten Eckeneffektcode 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. Verdichten Sie den Farbverlauf, bis er sich überlappt, sodass zwei durch Rot und Blau getrennte Farbblöcke entstehen

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

4. Die Farbe kann auf eine transparente Farbe eingestellt werden , ändern Sie Rot in Wenn es transparent wird, können Sie nur die blauen Farbfelder 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 in der Nähe der Kreismitte auf transparent ein.

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

6. Der radiale Farbverlauf kann die Mittelposition des Radiuskreises festlegen. Stellen Sie ihn also auf die linke obere Ecke ein und stellen Sie den linken oberen Radius auf 200 Pixel ein Stellen Sie fest, dass der Hintergrund transparent ist und konkave abgerundete Ecken implementiert sind.

Bei der Anwendung können Sie Pseudoelemente verwenden, um es festzulegen, und 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 in allen vier Richtungen 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 keine derart abgerundeten Ecken haben möchten, Sie können auch eine Ellipse erstellen, indem Sie zwei Parameter für den Radius festlegen.

 /* 左上 */ 
.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 ausprobieren und selbst anpassen können. Es können verschiedene seltsame Formen auftreten, die hier nicht gezeigt werden. Relativ gesehen reichen konkave abgerundete Ecken aus

[Verwandte Empfehlungen]

1 Kostenloses CSS-Online-Video-Tutorial

CSS online Handbuch

3.

php.cn Dugu Jiujian (2) - CSS-Video-Tutorial

Das obige ist der detaillierte Inhalt vonTeilen Sie einen Artikel mit CSS3, um einen konkaven abgerundeten Eckeneffektcode zu erzielen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!