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
Beschreiben Sie kurz die Replikation der MySQL-Überwachungsgruppe
Originaltext: https://dev.mysql.com/doc/refman/8....
So lösen Sie das Problem verschwommener kleiner Symbole auf Mobilgeräten
Vorwort Zuvor habe ich über das Problem der verti...
Verwenden der Docker Enterprise Edition zum Erstellen Ihres eigenen privaten Registrierungsservers
Docker ist wirklich cool, vor allem, weil es im V...
JavaScript zum Erzielen eines ausgewogenen digitalen Scroll-Effekts
Inhaltsverzeichnis 1. Hintergrund zur Umsetzung 2...
Tutorial zur Oracle-Bereitstellung in einer Linux-Umgebung
1. Umgebung und zugehörige Software Virtuelle Mas...
So lösen Sie das Problem, dass die Website kein direktes Kopieren von Seiteninhalten oder Informationen zulässt
Heutzutage erlauben viele Websites nicht das direk...
So erhalten Sie die dynamische Anzahl der verbleibenden Wörter im Textbereich
Ich bin bei der Arbeit auf einen Fall gestoßen, ü...
Detailliertes Tutorial zur Installation von PHP und Nginx auf Centos7
Da die Anwendung von CentOS auf der Serverseite i...
Verwenden Sie SWFObject, um das Browserkompatibilitätsproblem beim Einfügen von Flash in HTML perfekt zu lösen
Lasst uns gemeinsam lernen 1. Traditionelle Metho...
Wie kompliziert ist die Priorität von CSS-Stilen?
Gestern Abend habe ich mir eine Interviewfrage ang...
Detaillierte Erklärung zur Verwendung von $emit in Vue.js
1. Übergeordnete Komponenten können Props verwend...
Neuer Ansatz zum Umschalten der Tab-Leiste mit zwei Auswahlmöglichkeiten in Vue
Problembeschreibung Wenn wir an einem Projekt arb...
Ein kurzer Vergleich von Props in React
Inhaltsverzeichnis Props-Vergleich von Klassenkom...
Detaillierte Erklärung zum Anpassen des Stils von CSS-Bildlaufleisten
Dieser Artikel stellt den CSS-Bildlaufleistensele...
Detailliertes Tutorial zur Installation von Docker auf CentOS 8.4
Inhaltsverzeichnis Vorwort: Systemanforderungen: ...