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
So installieren Sie die MySQL 8.0-Datenbank auf dem M1-Chip (Bild und Text)
1. Herunterladen Zunächst möchte ich einen inländ...
Vue implementiert die Seiten-Caching-Funktion
In diesem Artikelbeispiel wird der spezifische Co...
Detaillierte Erläuterung der MySQL 8.0-Richtlinie zum Ablauf von Passwörtern
Ab MySQL 8.0.16 können Sie eine Richtlinie zum Ab...
Detaillierte Schritte zur Installation des CentOS7-Systems auf einer virtuellen VMWare-Maschine
Vorinstallationsarbeiten: Stellen Sie sicher, das...
Analyse impliziter Fehler bei der gleichzeitigen Replikation von MySQL 5.7
Vorwort Die meisten unserer MySQL-Onlineumgebunge...
Zwei Möglichkeiten zum vollständigen Löschen von Benutzern unter Linux
Linux-Betrieb Experimentelle Umgebung: Centos7-Vi...
So erstellen Sie mit Harbor ein privates Docker-Repository
Inhaltsverzeichnis 1. Open-Source-Lagerverwaltung...
Detaillierte Erläuterung der Gründe und Lösungen für schwebende Elemente, die die Höhe ihrer übergeordneten Elemente reduzieren
Schwebende Elemente führen dazu, dass ihre überge...
Installieren Sie eine virtuelle Python-Umgebung in Ubuntu 18.04
Nur als Referenz für Python-Entwickler, die Ubunt...
Analyse der geplanten Aufgaben und Ereignisplanungsbeispiele von MySQL
Dieser Artikel beschreibt anhand von Beispielen d...
Dieser Artikel zeigt Ihnen, wie die Speicherbereinigung in JavaScript funktioniert
Inhaltsverzeichnis 1. Übersicht 2. Speicherverwal...
Informationsübertragung und Funktionsaufrufe zwischen WeChat-Miniprogrammseiten und -Komponenten
In diesem Artikel werde ich die relevanten Inhalt...
Detaillierte Erklärung der Concat-bezogenen Funktionen in MySQL
1. concat()-Funktion Funktion: Mehrere Zeichenfol...
Probleme und Lösungen beim Bereitstellen eines Projekts beim Upgrade der Mysql-Datenbank von Version 5.6.28 auf Version 8.0.11
Die Probleme und Lösungen, die beim Bereitstellen...