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
Dieser Artikel fasst die spezifische Verwendung des CSS-Zweispaltenlayouts und des Dreispaltenlayouts zusammen
Vorwort Mit der Entwicklung großer Frontends tauc...
Inspirierende Designbeispiele für glänzendes und schimmerndes Website-Design
Diese Sammlung zeigt eine Reihe herausragender und...
Vorschau auf die neuen Funktionen von XHTML 2.0
<br />Bevor Browser die nächste Generation v...
So zeigen Sie das MySQL-Binlog (Binärprotokoll) an
Wenn Sie beispielsweise eine neue Tabelle erstell...
CentOS 8.0.1905 installiert ZABBIX Version 4.4 (verifiziert)
Zabbix Server-Umgebungsplattform Version: ZABBIX ...
Linux-Konfiguration ohne Passwort-Login, eigenständige und vollständige Distribution, ausführliches Tutorial
Inhaltsverzeichnis 1: Kennwortfreie Anmeldekonfig...
Die perfekte Lösung, um das Passwort in mysql8.0.19 zu vergessen
Lesetipp: MySQL 8.0.19 unterstützt Kontosperrfunk...
Lösung für das Problem der Zeilenhöhe der Elementtabellenkopfzeile
Inhaltsverzeichnis Vorwort 1. Ursache des Problem...
Detaillierte Erklärung zur Installation von MySQL in der Alibaba Cloud
Als leichte Open-Source-Datenbank wird MySQL häuf...
Div überschreitet den versteckten Text und versteckt den CSS-Code jenseits des Div-Teils
Vor dem Verstecken: Nach dem Verstecken: CSS: Code...
Detaillierte Erklärung des Linux-Netstat-Befehls
Inhaltsverzeichnis Linux-Netstat-Befehl 1. Detail...
Analyse der Unfallursachen durch Unicode-Signatur BOM
Möglicherweise verwenden Sie hier Include-Dateien,...
Detaillierte Schritte zur Installation von Docker 1.8 auf CentOS 7
Docker unterstützt die Ausführung auf den folgend...
Zusammenfassung der MySQL-DML-Anweisungen
DML-Operationen beziehen sich auf Operationen an ...
Verwenden Sie das Ansichtsfenster im Meta-Tag, um das Bildschirm-CSS zu definieren
<meta name="viewport" content="B...