Einführung in die Verwendung mehrerer spezieller Attribut-Tags in HTML

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

>>:  So führen Sie MySQL in einer Docker-Umgebung aus und aktivieren Binlog, um die Master-Slave-Synchronisierung zu konfigurieren

Artikel empfehlen

Schritt-für-Schritt-Anleitung zur Installation von VMware Workstation und des Betriebssystems WIN10 zur Verbindung mit dem externen Netzwerk (sehr ausführliches Tutorial)

Laden Sie zuerst die Version 15.1 von VMware Work...

Schritte zum Kapseln von Element-UI-Popupkomponenten

Kapseln Sie el-dialog als Komponente ein Wenn wir...

Detaillierte Erklärung der binären und varbinären Datentypen in MySQL

Vorwort BINARY und VARBINARY ähneln in gewisser W...

Detaillierte Erklärung der Docker-Maschinennutzung

Docker-Machine ist ein offiziell von Docker berei...

JS-Implementierung des Karussell-Karussell-Falls

In diesem Artikelbeispiel wird der spezifische JS...

So fügen Sie eine Schnittstellen-Abhörmaske in ein Vue-Projekt ein

1. Geschäftshintergrund Die Verwendung einer Mask...

Lösung für das Problem der Werteübergabe zwischen HTML-Seiten

Als ich den Aufsatz zum ersten Mal verwendete, füh...

Weitere Möglichkeiten zur Verwendung von spitzen Klammern in Bash

Vorwort In diesem Artikel werden wir weitere Verw...

Implementierung der Nginx-Konfiguration für den Multi-Port- und Multi-Domain-Name-Zugriff

Um mehrere Sites auf einem Server bereitzustellen...

Detaillierte Erläuterung der passwortfreien SSH-Anmeldekonfigurationsmethode (Bilder und Befehle)

Lassen Sie mich zunächst erklären, dass wir uns o...

Detaillierte Analyse der MySQL MDL-Metadatensperre

Vorwort: Wenn Sie eine SQL-Anweisung in MySQL aus...

Linux bestätigt, dass die Datendiskette deinstalliert wurde und ein neues benutzerdefiniertes Image erstellt werden kann

Häufig gestellte Fragen zu benutzerdefinierten Bi...

Vue realisiert den Card-Flip-Effekt

In diesem Artikelbeispiel wird der spezifische Co...

Vue implementiert Karussell-Animation

In diesem Artikelbeispiel wird der spezifische Co...

Implementierung der virtuellen React-Liste

Inhaltsverzeichnis 1. Hintergrund 2. Was ist eine...