HTML+CSS-Boxmodellbeispiel (Kreis, Halbkreis usw.) „border-radius“ ist einfach und leicht zu verwenden

Viele Freunde stellten beim Erlernen des Front-Ends fest, dass das Boxmodell standardmäßig quadratisch ist. Wie wird aus der Box das gewünschte Modell? Schauen wir uns zunächst die Standardsituation an----

<!DOCTYPE html>
<html lang="de">
<Kopf>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-kompatibel" content="IE=edge">
    <meta name="viewport" content="width=, initial-scale=1.0">
    <Stil>
        .Kasten{
            Breite: 100px;
            Höhe: 100px;
            Hintergrundfarbe: rgb(116, 51, 51);
            Box-Schatten: 0 10px 10px rot;
            Textausrichtung: zentriert;
            Position: absolut;
            Rand: 0 automatisch;   
            links: 0;
            rechts:0;
            unten: 0;
            oben: 0;

        }
    </Stil>
    <title>Dokument</title>
</Kopf>
<Text>
    <div Klasse="Box">

    </div>
</body>
</html>

Bildbeschreibung hier einfügen

Die Standardeinstellung ist ein Quadrat, was für Sie möglicherweise nicht gut aussieht. Versuchen wir es mit einer Runde!

<!DOCTYPE html>
<html lang="de">
<Kopf>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-kompatibel" content="IE=edge">
    <meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1.0">
    <Stil>
        .Kasten{
            Breite: 100px;
            Höhe: 100px;
            Randradius: 50 %;
            Hintergrundfarbe: rgb(28, 99, 60);
            Rand: 5px durchgezogen rgb(55, 0, 255);
            Position: absolut;
            Rand: 0 automatisch;
            links: 0;
            rechts: 0;
            unten: 0;
            oben: 0;
        }
    </Stil>
    <title>Runde</title>
</Kopf>
<Text>
    <div Klasse="Box">

    </div>
</body>
</html>

Bildbeschreibung hier einfügen

Schau, wie rund wir sind! Schauen wir uns die halbrunde Variante an!

<!DOCTYPE html>
<html lang="de">
<Kopf>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-kompatibel" content="IE=edge">
    <meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1.0">
    <Stil>
        .Kasten{
            Breite: 100px;
            Höhe: 50px;
            Hintergrundfarbe: rgb(175, 42, 216);
            Rand: 3px durchgezogenes RGB (26, 236, 26);
            Rahmen oben rechts – Radius: 50px;
            Rahmen oben links – Radius: 50px;
            Position: absolut;
            Rand: 0 automatisch;
            links: 0;
            rechts: 0;
            unten: 0;
            oben: 0;
        }
    </Stil>
    <title>Halbkreis</title>
</Kopf>
<Text>
    <div Klasse="Box">

    </div>
</body>
</html>

Bildbeschreibung hier einfügen

Probieren wir andere Formen aus!

<!DOCTYPE html>
<html lang="de">
<Kopf>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-kompatibel" content="IE=edge">
    <meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1.0">
    <Stil>
        .Kasten{
            Breite: 100px;
            Höhe: 100px;
            Hintergrundfarbe: rgb(82, 84, 223);
            Rahmenradius: 20px 15px 20px 10px;
            Position: absolut;
            Rand: 0 automatisch;
            links: 0;
            unten: 0;
            rechts: 0;
            oben: 0;
        }
    </Stil>
    <Titel>Demo</Titel>
</Kopf>
<Text>
    <div Klasse="Box">

    </div>
</body>
</html>

Bildbeschreibung hier einfügen

Wissenspunktanalyse:

border-radius: Durch das Festlegen eines abgerundeten Rahmens für ein Element können verschiedene abgerundete Formen wie Kreise, Halbkreise, Ellipsen und Viertelkreise erstellt werden.
Es können vier Werte eingestellt werden, nämlich oben links, oben rechts, unten rechts und unten links. Hier eine Eselsbrücke: „Starten Sie oben links und bewegen Sie sich im Uhrzeigersinn.“ . .

Ich hoffe, dieser Artikel hat Ihnen gezeigt, wie Sie die Border-Radius-Eigenschaft verwenden!

Damit ist dieser Artikel über die einfache Einführung in den Fall des HTML+CSS-Boxmodells (Kreis, Halbkreis usw.) „Randradius“ abgeschlossen. Weitere relevante Inhalte zum HTML+CSS-Boxmodell finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den verwandten Artikeln weiter unten. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!

<<: So fixieren Sie Inhalte beim Scrollen einer HTML-Seite an einer festen Position

>>: HTML realisiert Hotel-Screening-Funktion über Formular

Die Bedeutung der 5 Leerzeichenarten in HTML

HTML+CSS-Boxmodellbeispiel (Kreis, Halbkreis usw.) „border-radius“ ist einfach und leicht zu verwenden

Die Bedeutung der 5 Leerzeichenarten in HTML

Grundkenntnisse der MySQL-Datenbank

Frage zu benutzerdefinierten Attributen von HTML-Tags

So schreiben Sie den Stil einer CSS3-Tianzi-Rasterliste

Mysql 5.6 fügt eine Methode zum Ändern von Benutzername und Passwort hinzu

VUE implementiert einen Beispielcode für das Spiel Flappy Bird

Einige Kenntnisse über die absolute und relative Positionierung von Seitenelementen

MySQL 5.7.10 Installationsdokumentation Tutorial

Implementierung mehrerer Tomcat-Instanzen auf einer einzigen Maschine

HTML-Elemente durch Anzeige oder Sichtbarkeit verbergen

Artikel empfehlen

MySQL-Datenbank-Entwicklungsspezifikationen [empfohlen]

Detaillierte Diskussion der Unterschiede zwischen Schleifen in JavaScript

Tutorial zur Installation von Apache 2.4.41 unter Windows 10

Ein grafisches Tutorial zur Installation von MySQL unter Windows

Typescript+React zum Erzielen einfacher Drag-and-Drop-Effekte auf Mobilgeräten und PCs

Detailliertes Beispiel zum Einfügen benutzerdefinierter HTML-Datensätze im Quill-Editor

Verwenden Sie die Vue3+Vant-Komponente, um die Suchverlaufsfunktion der App zu implementieren (Beispielcode).

MySQL-Sortierprinzipien und Fallanalyse

Detaillierte Erläuterung des Prinzips und des Implementierungsprozesses der Nginx-Konfiguration https

Einige Datenverarbeitungsmethoden, die häufig in JS verwendet werden können

So erzielen Sie mit Vue3 beispielsweise einen Lupeneffekt

Detaillierte Erläuterung der Nginx-Rewrite-Jump-Anwendungsszenarien

Ausführliches Tutorial zur Installation von Deepin in VMware15 (Bild und Text)

Analyse der Nutzung des Xmeter API-Schnittstellentesttools

Der einfachste Weg, ein Programm beim Start in Linux automatisch auszuführen