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
Export- und Importvorgänge für Docker-Images
Was ist, wenn die Basis-Images bereits konfigurie...
So fügen Sie eine Schnittstellen-Abhörmaske in ein Vue-Projekt ein
1. Geschäftshintergrund Die Verwendung einer Mask...
Beispielcode zur Implementierung eines gestapelten Karusselleffekts mit HTML+CSS+JS
Wirkung: Wenn sich die Diashow in eine Richtung b...
MySQL-Fremdschlüsseleinschränkung (FOREIGN KEY) Fallerklärung
Die MySQL-Fremdschlüsseleinschränkung (FOREIGN KE...
Detailliertes Tutorial zum Erstellen einer Continuous-Integration-Delivery-Umgebung basierend auf Docker+K8S+GitLab/SVN+Jenkins+Harbor
Inhaltsverzeichnis Übersicht zur Umgebungseinrich...
Was muss ich tun, wenn ich einen fehlerhaften MySQL-Befehl abbrechen möchte?
Ich habe einen falschen MySQL-Befehl eingegeben u...
Element mit Auswahltabelle zum Ändern des Kontrollkästchens in der Kopfzeile in Textimplementierungscode
Methode 1: Verwenden Sie Tabellenattribute: Heade...
Verwenden Sie CSS, um einen 3D-Fotowandeffekt zu erstellen
Verwenden Sie CSS, um eine 3D-Fotowand zu erstell...
Ändern Sie den Stil des HTML-Textkörpers in JS
Inhaltsverzeichnis 1. Ursprüngliche Definition 2....
Util-Modul im node.js-Tutorial-Beispiel – detaillierte Erklärung
Inhaltsverzeichnis Ausgehend von der Typbeurteilu...
Der Einsatz von MySQL Triggern und worauf zu achten ist
Inhaltsverzeichnis Über Trigger Verwendung von Tr...
Detaillierte Erklärung zu Padding und Abkürzungen im CSS-Boxmodell
Wie oben gezeigt, sind Füllwerte zusammengesetzte...
7 Möglichkeiten, Elemente mit CSS vertikal zu zentrieren
【1】Kennen Sie die Breite und Höhe des zentrierten...
Einführung in den Löschvorgang von B-Tree
Im vorherigen Artikel https://www.jb51.net/articl...
Grafisches Tutorial zur kostenlosen Installationsversion von MySQL 5.7.21 winx64
Konfigurationsmethode für die kostenlose Installa...