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
So installieren Sie Composer unter Linux
1. Laden Sie das Installationsskript - composer-s...
Implementierung der Bereitstellung des Nginx+ModSecurity-Sicherheitsmoduls
Inhaltsverzeichnis 1. Herunterladen 2. Bereitstel...
MySQL-Fehler: Beim Versuch, eine Sperre zu erhalten, wurde ein Deadlock festgestellt. Versuchen Sie, die Transaktionslösung neu zu starten.
Finden Sie das Problem Als ich kürzlich die vorhe...
js implementiert eine einfache Methode zur Kapselung von jQuery und eine detaillierte Erklärung der Kettenoperationen
Inhaltsverzeichnis 1. Implementieren Sie die Meth...
Implementierung des Attributs „list-style-type“ vor CSS-geordneten oder ungeordneten Listen
Beispiel: <html> <Kopf> <style typ...
So verwenden Sie benutzerdefinierte CSS-Variablen in Vue
Inhaltsverzeichnis Die benutzerdefinierte CSS-Var...
Das Prinzip und die grundlegende Verwendung von Vue.use() in Vue
Inhaltsverzeichnis Vorwort 1. Verstehen mit Beisp...
Eine kleine Sammlung von HTML-Meta-Tags
<Head>……</head> gibt den Dateikopf vo...
Prozessdiagramm zur Implementierung des CentOS-IP-Verbindungsnetzwerks
1. Melden Sie sich beim System an und geben Sie d...
So ermitteln Sie, ob das Linux-System auf VMware installiert ist
Wie kann festgestellt werden, ob das aktuelle Lin...
Paketieren, Zusammenführen und Komprimieren von Vue-Projekten zur Optimierung der Reaktionsgeschwindigkeit von Webseiten
Inhaltsverzeichnis Vorwort 1. Der Anforderungsinh...
JavaScript implementiert eine Eingabefeldkomponente
In diesem Artikelbeispiel wird der spezifische Co...
Detaillierte Erläuterung des Aufbaus und der Verwendung des Docker Private Warehouse
Das Image kann auf hub.docker.com gespeichert wer...
Detaillierte Erläuterung der Konfiguration des statischen Nginx-Dienstes (Root- und Alias-Anweisungen)
Statische Dateien Nginx ist für seine hohe Leistu...
Kostenloses Tutorial zur Installationskonfiguration der Version MySQL 5.7.18
MySQL wird in eine Installationsversion und eine ...