CSS-Rand halb oder teilweise sichtbarer Implementierungscode
|
1. Verwenden Sie Pseudoklassen, um die Hälfte des Rahmens anzuzeigen
<!DOCTYPE html>
<html>
<Kopf>
<meta charset="utf-8">
<title>Verwenden Sie Pseudoklassen, um Inhalt vor oder nach einem Element einzufügen</title>
<Stil>
div {
Position: relativ;
Breite: 300px;
Höhe: 50px;
Hintergrundfarbe: #bbb;
Polsterung: 4px
}
div:vor {
Inhalt: "";
Position: absolut;
links: 0;
oben: -2px;
Breite: 50%;
Höhe: 2px;
Hintergrundfarbe: rot
}
</Stil>
<div>Bitte beachten Sie, dass der „obere Rand“ dieses Divs nur halb so groß ist</div>
</body>
</html>
2. Verwenden Sie absolute Positionierung und fügen Sie Rahmen hinzu
<!DOCTYPE html>
<html>
<Kopf>
<meta charset="utf-8">
<title>Positionspositionierung verwenden, die Hälfte des Rahmens wird angezeigt</title>
<Stil>
#Halter {
Höhe: 50px;
Breite: 300px;
Position: relativ;
Rand: 10px;
Hintergrundfarbe: #eee;
}
#Maske {
Position: absolut;
oben: -1px;
links: 1px;
Breite: 50%;
Höhe: 1px;
Hintergrundfarbe: Orchidee;
}
</Stil>
<div id="Inhaber">
Bitte beachten Sie, dass der „obere Rand“ dieses Div nur halb so groß ist <div id="mask"></div>
</div>
</body>
</html>
Dies ist das Ende dieses Artikels über den Implementierungscode für halb oder teilweise sichtbare CSS-Ränder. Weitere relevante CSS-Ränderinhalte 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! |
>>: Zusammenfassung verschiedener Formen der Anwendung von CSS-Stilen in Webseiten
Artikel empfehlen
Detaillierte Erklärung des JavaScript-Fortschrittsmanagements
Inhaltsverzeichnis Vorwort Frage Prinzip prüfen V...
So analysieren Sie die Attributschnittstelle zum Hinzufügen eines Dateisystems unter Linux oder Android
Der Erste: 1. Fügen Sie wichtige Headerdateien hi...
Tutorial zur Installation und Konfiguration der Remote-Anmeldung bei MySQL unter Ubuntu
In diesem Artikel finden Sie das Tutorial zur Ins...
Dieser Artikel hilft Ihnen, die spezifische Verwendung von cgroup in Docker gründlich zu verstehen
Inhaltsverzeichnis Was ist cgroup Zusammensetzung...
Tutorial zur Installation und Verwendung der verteilten Ceph-Software unter Linux
Inhaltsverzeichnis Vorwort 1. Grundlegende Umgebu...
Schritte zur Einführung von PWA in ein Vue-Projekt
Inhaltsverzeichnis 1. Abhängigkeiten installieren...
Detaillierte Erläuterung der Idee zur Implementierung dynamischer Effekte für die Änderung der Textfüllungsfarbe im Liedtext mit CSS3
Beim Abspielen von Musik werden die Liedtexte im ...
7 interessante Möglichkeiten, versteckte Elemente in CSS zu erreichen
Vorwort Die Ähnlichkeiten und Unterschiede zwisch...
Grafisches Tutorial zur Installation und Konfiguration von MySQL 5.7.17 und Workbench
In diesem Artikel wird die Installations- und Kon...
Detailliertes Tutorial zur Installation von qt5.12.8 und Umgebungskonfiguration auf Ubuntu18.04
Umfeld System: Ubuntu 18.04 Software: qt5.12.8 1....
CSS3-Countdown-Effekt
Ergebnisse erzielen Implementierungscode html <...
Detaillierte Erklärung der Getter-Verwendung in vuex
Vorwort Mit Vuex können wir im Store „Getter“ def...
Einige Schlussfolgerungen zur Gestaltung von Portal-Website-Fokusbildern
Fokusbilder sind eine Möglichkeit, Inhalte zu präs...
TimePicker im Element deaktiviert einen Teil der Zeit (deaktiviert auf Minuten)
Die Projektanforderungen lauten: Datum und Uhrzei...
Verwenden Sie Nginx, um einen Streaming-Media-Server zu erstellen und die Live-Übertragungsfunktion zu realisieren
Vorne geschrieben In den letzten Jahren ist die L...