Erstellen Sie mit CSS eine abgerundete Box

Als nächstes erstellen wir eine xHTML-Seite, die zwei Inhaltsbereiche mit den IDs „fixedBox“ und „FlowBox“ enthält. Es handelt sich um zwei DIVs mit fester Breite und nicht fester Breite. Jetzt erstellen wir eine Seite für diese beiden DIVs .

Die Theorie, die wir verwenden, ist, dass beim Hinzufügen eines Hintergrunds zu einem Element das Hintergrundbild immer über der Hintergrundfarbe erscheint. Um ein einfarbiges abgerundetes Rechteck zu erstellen, können wir zuerst ein normales Rechteck erstellen und dann ein Bild mit abgerundeten Ecken verwenden mit der gleichen Farbe wie der Hintergrund der vier abgerundeten Ecken dieses Elements, um einen Rahmen mit abgerundeten Ecken zu bilden. Die Methode wird im Folgenden in zwei Fällen ausführlich erläutert – Boxen mit fester Größe und Streaming-Boxen mit nicht fester Größe.

Abgerundete Ecken zu einem Feld mit fester Größe hinzufügen Schritt 1: Erstellen Sie ein einfaches xHTML-Dokument und fügen Sie ein wenig Inhalt hinzu
Klartext in Zwischenablage anzeigen und drucken?

Plaincopy in Zwischenablage anzeigen und drucken?
Körper, HTML {
Rand:0;
Polsterung:0;
Hintergrund:#a7a09a;
Farbe:#000;
}

Körper, HTML {
Rand:0;
Polsterung:0;
Hintergrund:#a7a09a;
Farbe:#000;
}Schritt 2: Legen Sie die Breite und Hintergrundfarbe des DIV fest
Klartext in Zwischenablage anzeigen und drucken?
div#fixedBox {
Breite: 340 Pixel;
Rand:40px;
Hintergrund:#E4ECF9;
}

div#fixedBox {
Breite: 340 Pixel;
Rand:40px;
Hintergrund:#E4ECF9;
}Schritt 3: Erstellen Sie ein abgerundetes Rechteck basierend auf der Breite des DIV. Da ich die Breite des DIV auf 340 Pixel eingestellt habe, muss ich jetzt ein abgerundetes Rechteck mit einer Breite von 340 Pixel erstellen. Nachdem Sie das Rechteck erstellt haben, platzieren Sie den oberen Teil Aus dem gesamten Rechteck mit Der untere Teil wurde ausgeschnitten und als DIV-Bild verwendet Ich habe die folgenden zwei Bilder gemacht:

Schritt 4: Wenden Sie das Bild auf den DIV-Hintergrund an
Klartext in Zwischenablage anzeigen und drucken?
div#fixedBox {
Breite: 340 Pixel;
Rand:40px;
Hintergrund:#E4ECF9 url(images/bottom.gif) keine Wiederholung unten in der Mitte;
}

div#fixedBox {
Breite: 340 Pixel;
Rand:40px;
Hintergrund:#E4ECF9 url(images/bottom.gif) keine Wiederholung unten in der Mitte;
}div#fixedBox h2{
Rand:0;
Polsterung:2px;
Hintergrund:#E4ECF9 url(images/top.gif) keine Wiederholung oben in der Mitte;
}

Oben wenden wir das Bild mit dem Namen Bottom.gif am unteren Rand des DIV an und verwenden dann Top.gif für das erste Element H2 des DIV. Natürlich müssen wir hier zunächst darauf achten, dass wir nichts hinzufügen können Marge zu h2. Werten oder fügen Sie Padding oder Border zu DIV hinzu.

Erstellen Sie ein abgerundetes Feld ohne feste Breite, aber nicht mit fester Höhe. Dies erfordert also zwei Bilder, oben und unten Denken Sie einen Moment darüber nach. Sie werden feststellen, dass wir dieses Mal 4 Bilder verwenden müssen, ein Bild in jeder Ecke, um ein abgerundetes Rechteck zu erstellen, das auf beliebige Weise verkleinert werden kann. Zuerst müssen wir noch einen DIV-Container erstellen grundlegende Inhalte hinzufügen.

Schritt 1: Erstellen Sie ein xHTML-Dokument
Klartext in Zwischenablage anzeigen und drucken?

Der zweite Schritt besteht darin, vier abgerundete Ecken zu erstellen. Die abgerundeten Ecken befinden sich in der oberen linken, unteren linken, oberen rechten und unteren rechten Richtung.

Schritt 3: Hintergrundfarbe der DIVview

-Klarkopie auf Clipboardprint setzen?
div#flowBox {
Rand:40px;
Hintergrund:#C3D9FF;
}

div#flowBox {
Rand:40px;
Hintergrund:#C3D9FF;
} Schritt 5: Abgerundete Ecken hinzufügen

Bei DIV-Containern ohne feste Breite und Höhe muss jede abgerundete Ecke ihre Position entsprechend Änderungen in der Breite und Höhe des DIV ändern können, daher können wir nur abgerundete Ecken zu den festen hinzufügen -width DIV. Die hier verwendeten Bilder mit fester Breite werden in zwei kleine Bilder verarbeitet und können direkt zum H2-Element hinzugefügt werden. Nachdem wir nun das H2-Element hinzugefügt haben, erhalten wir nur eine Seite der abgerundeten Ecke Es wird eine abgerundete Ecke erhalten, die in H2 verwendet werden kann, sodass zwei abgerundete Ecken gelöst werden und das p-Element eine abgerundete Ecke bereitstellen kann und das Div selbst eine abgerundete Ecke hat, also genau vier abgerundete Ecken.

Klartext in Zwischenablage anzeigen und drucken?
div#flowBox {
Rand:40px;
Hintergrund:#C3D9FF url(images/bottom-left.gif) no-repeat unten links;
}

div#flowBox h2{
Rand:0;
Polsterung:0;
Hintergrund:#C3D9FF url(images/top-left.gif) no-repeat oben links;
}

div#flowBox h2 span{
Rand:0;
Anzeige:Block;
Hintergrund:#C3D9FF url(images/top-right.gif) keine Wiederholung oben rechts;
}

div#flowBox p{
Rand:0;
Polsterung:0;
Hintergrund:#C3D9FF url(images/bottom-right.gif) no-repeat unten rechts;
}