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>
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>
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>
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>
Wissenspunktanalyse:
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
Artikel empfehlen
Detaillierte Erklärung der MySQL 30-Militärregeln
1. Grundlegende Spezifikationen (1) Es muss die I...
HTML-Tabellen-Tag-Tutorial (26): Zellen-Tag
Die Attribute des <TD>-Tags werden verwende...
Lösen Sie das Fehlerproblem von Warnungen, die möglicherweise mit der Option „--fix“ behoben werden können, wenn Sie ein Vue-Projekt ausführen
Problem: vue-cil3 wird mit Warnungen ausgeführt, ...
OpenLayers realisiert die Methode zur aggregierten Anzeige von Punkt-Feature-Layern
Inhaltsverzeichnis 1. Einleitung 2. Aggregation v...
Json-String + Cookie + lokaler Speicher in JS
Inhaltsverzeichnis 1.JSON-Zeichenfolge 1.1Json-Sy...
Das Fehlschlagen der Wiedergabe von FLV-/MP4- und anderen Videodateien auf der Website hängt mit dem MIME-Typ zusammen.
Beim Erstellen einer Website habe ich festgestellt...
Der praktische Prozess des Login-Status-Managements im vuex-Projekt
Inhaltsverzeichnis Werkzeug: Anmeldeszenario: übe...
MySQL verwendet Ereignisse, um geplante Aufgaben abzuschließen
Ereignisse können die Ausführung von SQL-Code ein...
Beispiele für die Erstellung und Verwendung von MySQL-Triggern
Inhaltsverzeichnis Was ist ein Auslöser Erstellen...
Koexistenz von Python2 und Python3 unter einem CentOS7-System
Der erste Schritt besteht darin, die Versionsnumm...
Zusammenfassung der Befehle zur Benutzerverwaltung im Linux-System
Benutzer- und Gruppenverwaltung 1. Grundlegende K...
Vollständiger Code zur Implementierung der Vue-Backtop-Komponente
Wirkung: Code: <Vorlage> <div Klasse=&qu...
Wozu dient das Feld „enctype“ beim Hochladen von Dateien?
Das enctype-Attribut des FORM-Elements gibt den Ko...
Webdesign-Tutorial (3): Designschritte und Denkweise
<br />Vorheriges Tutorial: Webdesign-Tutoria...