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
Beispielcode für die programmgesteuerte Verarbeitung von CSS-Stilen
Vorteile eines programmatischen Ansatzes 1. Globa...
5 Punkte, auf die Sie beim Erstellen einer Webseite achten sollten
1. Farbabstimmungsproblem <br />Eine Webseit...
Mysql fragt die ausgeführten Transaktionen ab und wie auf Sperren gewartet werden soll
Verwenden Sie navicat zum Testen und Lernen: Verw...
So verwenden Sie die JSZip-Komprimierung in CocosCreator
CocosCreator-Version: 2.4.2 Praktische Projektanw...
In CSS häufig verwendete Schriftstile zum Festlegen verschiedener Schriftartänderungen (Beispiel mit ausführlicher Erläuterung)
CSS-Schrifteigenschaften definieren die Schriftfa...
jQuery-Plugin zum Erzielen eines Karusselleffekts
Jeden Tag ein jQuery-Plugin - jQuery-Plugin zur I...
So implementieren Sie das Prototypmuster in JavaScript
Überblick Das Prototypmuster bezieht sich auf den...
Zusammenfassung des MySQL Undo Log und Redo Log
Inhaltsverzeichnis Undo-Protokoll Erstellung und ...
JavaScript CSS3 zur Implementierung einer einfachen Video-Sperrfunktion
In diesem Artikel wird versucht, eine Demo zur Si...
Das WeChat-Applet „Scroll-View“ implementiert eine Lösung zum doppelten Laden von Daten beim Hochziehen
In der Scroll-Ansicht des WeChat-Applets treten b...
Mysql aktualisiert bestimmte Felder einer anderen Tabelle basierend auf Daten aus einer Tabelle (SQL-Anweisung)
Der folgende Code führt MySQL ein, um einige Feld...
Informieren Sie sich, wie HTML und Ressourcen geladen werden
Der gesamte Inhalt dieses Blogs ist unter Creativ...
VUE + OPENLAYERS erreicht Echtzeit-Positionierungsfunktion
Inhaltsverzeichnis Vorwort 1. Etikettenstil defin...
Lösen Sie das Problem des unzureichenden Docker-Festplattenspeichers
Nachdem der Server, auf dem sich Docker befindet,...
Flex-Layout erreicht feste Anzahl von Zeilen pro Zeile + adaptives Layout
Dieser Artikel stellt das Flex-Layout vor, um ein...