So implementieren Sie wellenförmige Ränder in CSS: Erstellen Sie zunächst eine HTML-Beispieldatei. Erstellen Sie dann ein p-Tag. Implementieren Sie schließlich wellenförmige Ränder durch den radialen Farbverlauf.
Die Betriebsumgebung dieses Artikels: Windows7-System, HTML5- und CSS3-Version, Dell G3-Computer.
Wie implementiert man einen wellenförmigen Rand in CSS?
CSS3-Radialverlaufsmethode zum Erzielen von Wellenrändern und Innenfasen
Vorwort
Der Chef gab mir ein Gutscheinbild (wie unten gezeigt), dieser Wellenrand und die Innenfasung können nicht in CSS geschrieben sein, also habe ich es dem Chef erklärt und um einen UI-Ausschnitt gebeten. Der Chef antwortete: CSS3 kann das. Nun, die Großen haben gesagt, dass es realisierbar ist. Warum beeilen Sie sich nicht und fragen Sie Bruder Gu nach Du Niang?
Innenfase implementieren
Laden Sie den Code hoch und erklären Sie dann den Code
<p class="radial-gradient"></p>
<style>
.radial-gradient {
width: 200px;
height: 100px;
position: relative;
background-image: radial-gradient(circle at right top, #fff, #fff 10px, transparent 11px),
radial-gradient(circle at right bottom, #fff, #fff 10px, transparent 11px);
background-color: red;
}
</style>Der Stil von Radial-Gradient muss nicht erklärt werden, jeder, der etwas CSS kennt, wird es wissen. Der Schlüssel ist der .radial-gradient:after-Stil.
Konzentrieren Sie sich darauf, zu erklären, wofür der Radialverlaufsstil (Kreis rechts oben, #fff, #fff 10px, transparent 11px) gedacht ist.
Kreis stellt einen kreisförmigen Farbverlauf dar, was einfach das Zeichnen eines Kreises bedeutet. Um einen Kreis zu zeichnen, müssen Sie den Ursprung kennen.
Kreis oben rechts Die rechte Spitze im Kreis oben rechts ist die Ursprungsposition. Hier ist die Ursprungsposition die Koordinate relativ zum Container. „Right“ stellt die äußerst rechte Seite des Containers dar, und „top“ stellt die oberste Seite des Containers dar, also die obere rechte Ecke.
Kreis oben rechts Die #fff, #fff 10px, transparent 11px dahinter sind die Längen verschiedener Farbverläufe ausgehend vom Ursprung.
Das erste #fff im Code #fff, #fff 10px, transparent 11px bedeutet, dass der Ursprung eine #fff-Farbe hat, #fff 10px bedeutet, dass der Abstand vom Ursprung 10px im Radius beträgt und der Abstand alle #fff-Farbe hat Transparent 11 Pixel bedeutet, dass der Abstand vom Ursprung 10 Pixel beträgt. Da keine anderen Farben festgelegt sind, sind alle Farben nach 11 Pixel transparent.
Zusammenfassung Radial-Gradient (Kreis oben rechts, #fff, #fff 10px, transparent 11px) besteht darin, einen Kreis mit der oberen rechten Ecke des Containers als Ursprung zu zeichnen, mit der Farbe #fff innerhalb der Der Radius beträgt 10 Pixel und der Radius ist größer als der 10-Pixel-Bereich. Im Inneren sind alle transparenten Farben.
Auf diese Weise wird in der oberen rechten Ecke eine innere Fase gebildet
Dasselbe wie beim Radialgradienten (Kreis rechts unten, #fff, #fff 10px, transparent 11px); ich werde es nicht erklären.
Wellenrand realisieren
Laden Sie den Code hoch und fügen Sie einen CSS-Stil hinzu
<style>
.radial-gradient:after {
content: '';
position: absolute;
top: 0px;
bottom: 0px;
left: -5px;
width: 10px;
height: 100%;
background: radial-gradient(circle, #fff, #fff 4px, transparent 5px);
background-size: 10px 10px;
}
</style>Hintergrund: radial-gradient(circle, #fff, #fff 4px, transparent 5px); Ursprung In der Mitte des Containers bedeutet #fff, #fff 4px, transparent 5px, dass die Farbe innerhalb eines Radius von 4px #fff ist und die Farbe innerhalb eines Radius größer als 4px transparent ist. Auf diese Weise befindet sich in der Mitte des Containers ein #fff-Farbkreis mit einem Durchmesser von 8 Pixeln (der Container hier ist: danach).
(Der blaue Hintergrund dient dem Demonstrationseffekt)
Hintergrundgröße hinzufügen: 10px 10px; Stellen Sie die Hintergrundgröße auf 10px breit und 10px hoch ein, sodass Sie mehrere #fff-Farbkreise mit einem Durchmesser von 8px erhalten können. (Das Hintergrundblau dient dem Demonstrationseffekt)
Zusammenfassung
Um eine innere Abschrägung zu erreichen, müssen Sie tatsächlich einen Kreis mit der Farbe #fff zeichnen. Nur ein Viertel des Kreises befindet sich innerhalb des Behälters. Um den wellenförmigen Rand zu erzielen, müssen Sie tatsächlich mehrere Kreise zeichnen Mit der Farbe #fff befindet sich nur die Hälfte des Kreises im Container
【Empfohlenes Lernen:
]
Das obige ist der detaillierte Inhalt vonSo implementieren Sie einen Wellenlinienrand in CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
