Einführung in die Verwendung mehrerer spezieller Attribut-Tags in HTML
|
Die folgenden Attribute sind nicht sehr browserkompatibel. 1.Transformieren:Drehen(45 Grad) 2.border-top-left-radius Mit dieser Eigenschaft können Sie einem Element abgerundete Ränder hinzufügen 3.border-radius Mit dieser Eigenschaft können Sie einem Element abgerundete Ränder hinzufügen 4. Die Eigenschaft box-shadow fügt einer Box einen oder mehrere Schatten hinzu 5. Die Eigenschaft text-shadow setzt einen Schatten auf den Text 6. Übergang Aus Gründen der besseren Kompatibilität mit verschiedenen Browsern ist ein Präfix erforderlich. -o- /*Opera-Browser*/ -webkit- /*Webkit-basierte Browser Safari und Chrome*/ -ms- /*IE 9*/ -moz- /*Firefox-Browser*/ 1.Transformieren:Drehen(45 Grad) Verwenden Sie die Transform-Eigenschaft, um das Objekt zu drehen, wobei (45 Grad) der Drehwinkel ist transformieren: drehen (45 Grad); -ms-transform:rotate(45deg); /*IE 9*/ -o-transform:rotate(45deg); /*Opera-Browser*/ -webkit-transform:rotate(45deg); /*Webkit-basierte Browser Safari und Chrome*/ -moz-transform:rotate(45deg); /*Firefox-Browser*/ 2.border-top-left-radius border-radius Mit dieser Eigenschaft können Sie einem Element abgerundete Ränder hinzufügen. <br />Mit ersterem können Sie auswählen, wo der abgerundete Rand hinzugefügt werden soll. Rand oben links mit Radius, Rand oben rechts mit Radius, Rand unten links mit Radius, Rand unten rechts mit Radius border-top-left-radius Mit dieser Eigenschaft können Sie einem Element abgerundete Ränder hinzufügen. Dies ist dasselbe wie border-radius, aber Sie können steuern, wo der abgerundete Rand hinzugefügt werden soll. 3. Die Eigenschaft box-shadow fügt der Box einen oder mehrere Schatten hinzu, und die Eigenschaft text-shadow setzt einen Schatten auf den Text Box-Shadow: H-Schatten || V-Schatten || Unschärfe || Ausbreitung || Farbe || Einschub; Eigenschaften: horizontale Schattenposition || vertikale Schattenposition || Unschärfeabstand || Schattengröße || Schattenfarbe || Äußeren Schatten (Anfang) in inneren Schatten ändern Kastenschatten: 1px 1px 3px #292929; Textschatten: H-Schatten || V-Schatten || Unschärfe || Farbe; Textschatten: 0px -1px 0px #000; 4. Übergang Eigenschaft || Dauer || Zeitfunktion || Verzögerung Gibt den Namen der CSS-Eigenschaft an, die den Übergangseffekt festlegt. || Gibt die Anzahl der Sekunden oder Millisekunden an, die der Übergangseffekt benötigt, um abgeschlossen zu werden. || Gibt die Geschwindigkeitskurve des Geschwindigkeitseffekts an. || Definiert, wann der Übergangseffekt beginnt. Die Übergangseigenschaft wird derzeit nicht von allen Browsern unterstützt. Leichtigkeit. Die Standardeinstellung. Die Animation beginnt langsam, wird dann schneller, dann langsamer, bevor sie endet. ease-in Die Animation startet mit langsamer Geschwindigkeit. Die Ease-Out-Animation endet mit langsamer Geschwindigkeit Die Ease-In-Out-Animation startet und endet mit langsamer Geschwindigkeit Übergang: Hintergrund, 5 Sekunden einfach; EIN EG: Code kopieren Der Code lautet wie folgt:<html> <Kopf> <Stil> div { Breite: 100px; Höhe: 100px; Hintergrund: blau; Übergang: Breite 2 s; -moz-transition:Breite 2s; /* Firefox 4 */ -webkit-transition:width 2s; /* Safari und Chrome */ -o-Übergang:Breite 2s; /* Opera */ } div:schweben { Breite: 300px; } </Stil> </Kopf> <Text> <div></div> <p>Bewegen Sie den Mauszeiger bitte über das blaue Div-Element, um den Übergangseffekt zu sehen. </p> <p><b>Hinweis:</b> Dieses Beispiel funktioniert nicht im Internet Explorer. </p> </body> </html> ZWEI EG: Code kopieren Der Code lautet wie folgt:<html> <Kopf> <Stil> div { Breite: 100px; Höhe: 100px; Hintergrund: blau; Übergangseigenschaft: Hintergrund; Übergangsdauer: 5 s; /* Firefox 4 */ -moz-transition-property:Hintergrund; -moz-Übergangsdauer: 5 s; /* Safari und Chrome -webkit-transition-property:Hintergrund; -webkit-Übergangsdauer:5s;*/ Übergang: Hintergrund, 5 Sekunden einfach; /* Oper */ -o-Übergangseigenschaft:Hintergrund; -o-Übergangsdauer: 5 s; } div:schweben { Hintergrund: rot; } </Stil> </Kopf> <Text> <div></div> <p>Bewegen Sie den Mauszeiger bitte über das blaue Div-Element, um den Übergangseffekt zu sehen. </p> <p><b>Hinweis:</b> Dieses Beispiel funktioniert nicht im Internet Explorer. </p> </body> </html> |
<<: Detaillierte Erklärung der CSS-Stil-Kaskadierungsregeln
Artikel empfehlen
Detailliertes Tutorial zum Kompilieren und Installieren von Python3.6 unter Linux
1. Gehen Sie zunächst auf die offizielle Website ...
Interpretation und Verwendung verschiedener React-State-Manager
Zunächst müssen wir wissen, was ein Zustandsmanag...
MySQL-Joinpufferprinzip
Inhaltsverzeichnis 1. MySQL-Joinpuffer 2. JoinBuf...
Hexadezimale Farbcodes (vollständig)
Rot und Pink und ihre Hexadezimalcodes. #990033 #...
Installieren Sie ein CentOS-System basierend auf WindowsX Hyper-V
Derzeit nutzen die meisten Linux-Benutzer entwede...
Mit Mailto ist das Senden von E-Mails im HTML-Format ganz einfach
Kürzlich habe ich dem Footer-Postfach des Kunden e...
Lösung für das Problem, dass das Hintergrundbild eines Etiketts im IE8 nicht angezeigt wird
Ich bin heute auf ein kleines Problem gestoßen und...
Lösung für das Problem, dass Centos8 Docker nicht installieren kann
Problem [root@zh ~]# [root@zh ~]# [root@zh ~]# yu...
Detaillierte Erklärung zum Lay-Loading von JavaScript
Inhaltsverzeichnis Lazy Loading CSS-Stile: HTML-T...
So verbinden Sie Django 2.2 mit einer MySQL-Datenbank
1. Beim Ausführen des Projekts werden folgende Fe...
Universelle Lösung für den Fehler beim Starten von MySQL unter Windows
MySQL-Startfehler Vor der Installation von MySQL ...
Detaillierte Verwendung des Linux-Textsuchbefehls find
Der Befehl „Find“ wird hauptsächlich zum Suchen v...
Implementierungsmethode für die bidirektionale Bindung von Vue-Daten
Inhaltsverzeichnis 1. Einleitung 2. Code-Implemen...
Der Unterschied zwischen Schaltfläche und Eingabetyp = Schaltfläche und Vorsichtsmaßnahmen
<button>-Tag <br />Definition und Verw...
Beispiele und bewährte Vorgehensweisen für die Seitennummerierung
<br />Struktur und Hierarchie reduzieren die...