Heim > Web-Frontend > CSS-Tutorial > Wissen Sie, wie man mit CSS konkav abgerundete Ecken erzielt?

Wissen Sie, wie man mit CSS konkav abgerundete Ecken erzielt?

王林
Freigeben: 2020-11-04 16:37:03
nach vorne
2361 Leute haben es durchsucht

Wissen Sie, wie man mit CSS konkav abgerundete Ecken erzielt?

Dieser Artikel verwendet einen radialen Farbverlauf, um konkav abgerundete Ecken mit einem transparenten Hintergrund zu erzielen.

(Empfohlenes Video-Tutorial: CSS-Video-Tutorial)

Grundlegender linearer Farbverlauf

div {
    height: 100px;
    width: 200px;
    background-image: linear-gradient(90deg, red, blue);
}

<div>从左到右的红到蓝渐变</div>
Nach dem Login kopieren

Prozentsatz hinzufügen, um den Farbverlaufsbereich anzupassen

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

<div></div>
Nach dem Login kopieren

Verdichten Sie den Farbverlaufsbereich, bis sie sich überlappen und zwei Farbblöcke bilden, die durch Rot und Blau getrennt sind

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

<div></div>
Nach dem Login kopieren

Die Farbe kann auf transparente Farbe eingestellt werden. Wenn Sie die rote Farbe in eine transparente Farbe ändern, können Sie nur den blauen Farbblock sehen Nahe der Mitte des Kreises. Auf transparent setzen

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

<div></div>
Nach dem Login kopieren

Der radiale Farbverlauf kann die Mittelposition des Radiuskreises festlegen. Stellen Sie ihn also auf die linke obere Ecke ein, passen Sie die Radiusgröße links oben auf 200 Pixel an, und Sie werden feststellen, dass die Es entsteht eine konkav abgerundete Ecke mit transparentem Hintergrund.

Sie können beim Anwenden Pseudoelementeinstellungen verwenden und dann die absolute Positionierung verwenden, die Position anpassen und sie zum gewünschten Effekt kombinieren.

/* 径向渐变主体 */
.raidal {
    height: 100px;
    width: 100px;
    background:radial-gradient(transparent 50%,blue 50%);
}

<div class=&#39;raidal&#39;></div>
Nach dem Login kopieren

Ähnlich wie bei den vier Richtungen müssen Sie einfach die Mittelposition des Kreises anpassen , Ich möchte das nicht tun Abgerundete Ecken können auch elliptisch sein, und der Radius ist auf zwei Parameter eingestellt, was einer Ellipse entspricht.

Der radiale Farbverlauf verfügt über 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

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

<div class=&#39;raidal1&#39;></div>
Nach dem Login kopieren

Verwandte Empfehlungen:

CSS-Tutorial

Das obige ist der detaillierte Inhalt vonWissen Sie, wie man mit CSS konkav abgerundete Ecken erzielt?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
css
Quelle:csdn.net
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage