Beispielcode für HTML-Layered-Box-Shadow-Effekt
|
<!DOCTYPE html>
<html>
<Kopf>
<meta charset="utf-8" />
<Stil>
Körper{
Rand: 0;
}
.klarfix {
Überlauf: automatisch;
}
.Schattenbox{
Box-Schatten: 0px 3px 10px 1px #888888;
}
div.sticky{
Position: klebrig;
oben: 0;
Hintergrund: Azurblau;
Textausrichtung: zentriert;
}
.img1{
schweben: links;
klar: beides;
Rand links: 100px;
Deckkraft: 0,8;
Überlauf: automatisch;
}
ul{
Listenstiltyp: 0;
Rand: 0;
Polsterung: 0;
Breite: 7%;
Höhe: 100%;
Hintergrundfarbe: RGB (147, 171, 235);
Position: fest;
Überlauf: automatisch;
Rahmenradius: 25px;
}
li a{
Anzeige: Block;
Farbe: #000;
Polsterung: 8px 16px;
Textdekoration: keine;
Schriftfamilie: „fett“;
}
li:hover{
Hintergrundfarbe: #555;
Farbe: weiß;
}
</Stil>
<title>Offizielle XR-Website</title>
</Kopf>
<Text>
<div Klasse="klebrige Clearfix-Schattenbox">
<img class="img1" src="img/4.png" width="60px" height="60px" />
</div>
<div>
<ul>
<li><a href="index.html">Kerntechnologie</a></li>
<li><a href="index.html">Partei- und Regierungsabteilung</a></li>
<li><a href="index.html">Geschäftsstatus</a></li>
<li><a href="index.html">Zukünftige Entwicklung</a></li>
<li><a href="index.html">Kontaktieren Sie uns</a></li>
</ul>
</div>
<div style="padding-bottom: 2000px;"></div>
</body>
</html> Direkt auf den vollständigen Code, dies ist auch jedermanns Lieblingsmethode, kein Aufschieben mehr, wir schauen uns hauptsächlich dies an
Dies ist der „Schuldige“ des Schatteneffekts. Da ich Box-Shadow definiert und dann die relevanten Parameter angegeben habe, kann ich es so einstellen. Ein Freund fragte, was dieser Parameter bedeutet und woher ich das weiß. Es ist okay, ich erzähle es dir mit einem Bild!
Dies ist das Ende dieses Artikels über den HTML-Layered-Box-Shadow-Effekt. Weitere verwandte HTML-Layered-Box-Shadow-Inhalte finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen! |
>>: 4 Funktionen, die durch das Transform-Attribut in CSS3 implementiert werden
Artikel empfehlen
Ein vorläufiges Verständnis der benutzerdefinierten CSS-Eigenschaften
Heute sind CSS-Präprozessoren der Standard für di...
Hilfe zum Webdesign: Datenreferenz für Web-Schriftgrößen
<br />Der Inhalt wurde aus dem Internet repr...
Tutorial zur Installation des Nvidia-Grafikkartentreibers in Ubuntu 18.04 (mit Bildern und Text)
0. Vorbereitende Maßnahmen Deaktivieren Sie den s...
Tomcat9-Download, -Installation und -Konfiguration + ausführliches Tutorial zur Integration in Eclipse
offizielle Tomcat-Website Tomcat entspricht einem...
Detaillierte grafische Erklärung zum Einrichten von Routing und virtueller Maschinenvernetzung unter Linux
Was ist Routing? Unter Routing versteht man die Ü...
Detaillierte Erklärung der Verwendung von JSON.parse und JSON.stringify
Inhaltsverzeichnis JSON.parse JSON.parse-Syntax R...
Verwenden des JS-Timers zum Verschieben von Elementen
Verwenden Sie einen JS-Timer, um ein Element zu e...
Detaillierte Analyse der MySQL-Indexdatenstruktur
Inhaltsverzeichnis Überblick Indexdatenstruktur B...
So passen Sie einen EventEmitter in node.js an
Inhaltsverzeichnis Vorwort 1. Was ist 2. So verwe...
So verwenden Sie rsync unter Linux
Inhaltsverzeichnis 1. Einleitung 2. Installation ...
Designtheorie: Lesbarkeit und Verständlichkeit von Texten
<br />Vor nicht allzu langer Zeit habe ich a...
Lösen Sie das Problem, dass PhpStorm keine Verbindung zu VirtualBox herstellen kann
Problembeschreibung: Wenn der SFTP-Host von phpst...
Detaillierte Anweisungen zur Installation von Jenkins auf Ubuntu 16.04
1. Voraussetzungen JDK wurde installiert echo $PA...
Anwendungsbeispiele für die virtuelle Liste des WeChat-Applets
Inhaltsverzeichnis Vorwort Was ist eine virtuelle...
Wie erreicht MySQL eine Master-Slave-Synchronisierung?
Die Master-Slave-Synchronisierung, auch Master-Sl...