Beispielcode zur Implementierung des Div-Konkaveckenstils mit CSS
|
Bei der normalen Entwicklung verwenden wir normalerweise konvexe, abgerundete Ecken, also das Border-Radius-Attribut. Wenn eine konkave Ecke vorhanden ist, ziehen wir grundsätzlich zwei Implementierungsmethoden in Betracht. Eine Möglichkeit besteht darin, das Hintergrundbild direkt zu verwenden, die andere darin, CSS zu verwenden. Die verwendeten Eigenschaften sind „Hintergrund“ oder „Hintergrundbild“ kombiniert mit „radialem Farbverlauf“. Beispiel: Hintergrundbild: radialer Farbverlauf (200px bei 50px 0px, #fff 50px, #4169E1 50px); Beim radialen Farbverlauf müssen hauptsächlich drei Parameter gesteuert werden. Zum einen sind es der Ursprung und die Größe. Die Größe ist ähnlich wie der Rahmenradius. Der Ursprung wird durch at dargestellt, das die Koordinaten des Punkts angeben kann, oder durch left, right, top und bottom. Als nächstes kommen zwei Farben und Transparenz, Größe usw. Hier 50px oder Prozentsatz, ich habe das erste getestet, nur 50 ist halb gerundet, während die zweiten 50px wenig Wirkung zu haben scheinen. Beispiel:
Um den im Bild gezeigten hellgrünen konkaven Eckenstil zu erreichen, gibt es kein Materialbild. Start: Legen Sie zunächst die Breite und Höhe dieses Div fest und legen Sie die relative Positionierung fest. Platzieren Sie dann 4 absolut positionierte Elemente darin, stellen Sie ihre Breite und Höhe gleich der Größe der Konkavität ein und positionieren Sie sie dann absolut, um sie an den 4 Ecken zu befestigen. Verwenden Sie dann den oben genannten konkaven Stil. Es ist zu beachten, dass die oberen beiden Ecken sehr einfach auszufüllen sind, die unteren beiden Ecken jedoch, nachdem nur die Position und die konkave Position festgelegt wurden, wie folgt aussehen:
Hierzu ist eine weitere Drehung erforderlich. Der vollständige Code lautet wie folgt: CSS:
.notice_box_cls #gemeinsameNotice {
Hintergrundfarbe: #E8F7F2;
Polsterung: 20px 10px;
}
.notice_box_cls .notice_body0 {
Position: relativ;
}
.Benachrichtigungsbox_cls .Benachrichtigungskörper {
Hintergrund: radialer Farbverlauf (15px oben links, #fff 50px, #E8F7F2 50 %);
Position: absolut;
links: 0;
oben: 0;
Breite: 15px;
Höhe: 15px;
}
.notice_box_cls .notice_body1 {
Hintergrund: radialer Farbverlauf (15px oben rechts, #fff 50px, #E8F7F2 50 %);
Position: absolut;
rechts: 0;
oben: 0;
Breite: 15px;
Höhe: 15px;
}
.notice_box_cls .notice_body2 {
Hintergrund: radialer Farbverlauf (15px unten rechts, #fff 50px, #E8F7F2 50 %);
Position: absolut;
links: 0;
unten: 0;
Breite: 15px;
Höhe: 15px;
transformieren: drehen (90 Grad);
}
.notice_box_cls .notice_body3 {
Hintergrund: radialer Farbverlauf (15px unten links, #fff 50px, #E8F7F2 50 %);
Position: absolut;
rechts: 0;
unten: 0;
Breite: 15px;
Höhe: 15px;
transformieren: drehen (270 Grad);
}html:
<div Klasse="Hinweis">
<div Klasse="">
<div Klasse="Hinweis_Titel">
<span>Hinweise und Ankündigungen</span>
</div>
<div Klasse="Hinweis_Körper0">
<ul id="gemeinsameNotice">
<!-- <li><a href="#" class="fl">Bildungsinformatik in der Provinz Hubei, S1</a><i class="fr">13.05.2017</i></li>
<li><a href="#" class="fl">Bildungsinformatik in der Provinz Hubei, S2</a><i class="fr">13.05.2017</i></li>
<li><a href="#" class="fl">Bildungsinformatik der Provinz Hubei S3</a><i class="fr">13.05.2017</i></li>
<li><a href="#" class="fl">Bildungsinformatik in der Provinz Hubei, S4</a><i class="fr">13.05.2017</i></li>
<li><a href="#" class="fl">Bildungsinformatik in der Provinz Hubei, S5</a><i class="fr">13.05.2017</i></li>
<li><a href="#" class="fl">Bildungsinformatik in der Provinz Hubei, S6</a><i class="fr">13.05.2017</i></li> -->
</ul>
<div Klasse="Benachrichtigungstext">
</div>
<div Klasse="Hinweis_Körper1">
</div>
<div Klasse="Hinweis_Körper2">
</div>
<div Klasse="Hinweis_Körper3">
</div>
</div>
</div>
</div>Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird. |
<<: Mehrere Möglichkeiten, die Lesbarkeit von Webseiten zu verbessern
>>: Detaillierter Prozess der Vue-Front-End-Verpackung
Artikel empfehlen
7 native JS-Fehlertypen, die Sie kennen sollten
Inhaltsverzeichnis Überblick 1. Bereichsfehler 2....
Detaillierte Beschreibung der HTML-Tabellenrahmensteuerung
Nur den oberen Rand anzeigen <table frame=above...
Zusammenfassung zur Verwendung der Bootstrap-Tabelle
In diesem Artikel erfahren Sie, wie Sie die Boots...
Der Quellcode zeigt, warum Vue2 Daten und Methoden direkt abrufen kann
Inhaltsverzeichnis 1. Beispiel: Hiermit können Da...
So erstellen Sie Ihre erste React-Seite
Inhaltsverzeichnis Was ist Rract? Hintergrund Rea...
MySQL-Cursorfunktionen und -Verwendung
Inhaltsverzeichnis Definition Die Rolle des Curso...
So legen Sie die UTF-8-Kodierung in einer MySQL-Datenbank fest
Ändern Sie die Datei /etc/my.cnf oder /etc/mysql/...
Webdesign-Tutorial (8): Webseitenhierarchie und Raumgestaltung
<br />Vorheriger Artikel: Webdesign-Tutorial...
Master-Slave-Synchronisationskonfiguration und Lese-/Schreibtrennung der MySQL-Datenbank
Die Verwendung der MySQL Master-Slave-Replikation...
Tutorial zur Verarbeitung statischer Ressourcen in Tomcat
Vorwort Alle Anfragen in Tomcat werden von Servle...
Vermeiden Sie den Missbrauch zum Lesen von Daten in Vue
Inhaltsverzeichnis Vorwort 1. Der Prozess der Ver...
Docker verwendet das Tool nsenter, um in den Container zu gelangen
Bei der Verwendung von Docker-Containern ist es b...
Linux-Befehl „exa“ (bessere Dateianzeige als „ls“)
Installieren Befolgen Sie zur Installation die RE...
Prozessdiagramm für die Ideenbereitstellung und Tomcat-Dienstimplementierung
Konfigurieren Sie zunächst die Projektartefakte K...
Detaillierte Erläuterung der Befehle zum Status und zur Leistung des Linux-Servers
Serverstatusanalyse CPU-Details des Linux-Servers...