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

Die folgenden Attribute sind nicht gut für die Browserkompatibilität.

1.Transform: Drehen (45 Grad)

2. Border-Top-Links-Radius Mit dieser Eigenschaft können Sie Elementen abgerundete Grenzen hinzufügen

3.Border-Radius Mit dieser Eigenschaft können Sie Elementen abgerundete Grenzen hinzufügen

4. Die Eigenschaft Box-Shadow fügt der Box einen oder mehrere Schatten hinzu

5. Die Eigenschaft von Text-Shadow setzt einen Schatten in den Text

6. Übergang

Um mit jedem Browser besser kompatibel zu sein, sind Präfixe erforderlich.

-O- /*Opera-Browser* / /

-Webkit- /*Webkit-Kernel-Browser-Safari und Chrome* /

-ms- /*dh 9* / / /

-moz- /*Firefox Browser* /

Das Objekt wird durch die Transformationseigenschaft gedreht, wobei (45 °) der Rotationswinkel ist

Transformation: Drehen (45 Grad);

-MS-Transformation: Drehen (45 Grad); /*Dh 9*////

-O-Transformation: Drehen (45 Grad); /*Opera -Browser*//

-Webkit-Transformation: Drehen (45 Grad); /*Webkit -Kernel -Browser -Safari und Chrome*///////

-moz-transform: drehen (45 Grad); /*Firefox Browser*//

Ersteres kann die Position auswählen, an der die abgerundete Grenze hinzugefügt wird

Grenze-Top-Links-Radius, Grenze-Rechte-rechte Radius, Grenzboden-Links-Radius, Grenz-Bottom-Right-Radius, Grenz-Bottom-Right-Radius

Border-Top-Links-Radius Mit dieser Eigenschaft können Sie Elementen, genau wie Border-Radius, abgerundete Grenzen hinzufügen, nur um zu kontrollieren, wo die abgerundeten Grenzen hinzugefügt werden müssen.

Box-Shadow: H-Shadow || V-Shadow || verschwommen || Verbreitung || Farbe || Einsatz;

Eigenschaften: Position des horizontalen Schattens || Position des vertikalen Schattens || Unschärfeabstand || Schattengröße || Schattenfarbe || Ändern Sie den äußeren Schatten (Anfang) in den inneren Schatten

Box-Shadow: 1PX 1PX 3PX #292929;

Text-Shadow: H-Shadow || V-Shadow || verschwommen || Farbe;

Text -Shadow: 0px -1px 0px #000;

Eigenschaft || Dauer || Timing-Funktion || Verzögerung

Gibt den Namen des CSS -Attributs an, das den Übergangseffekt || festlegt Gibt an, wie viele Sekunden oder Millisekunden erforderlich sind, um den Übergangseffekt || zu vervollständigen Gibt die Geschwindigkeitskurve des Geschwindigkeitseffekts an || Definiert, wann der Übergangseffekt beginnt

Derzeit unterstützen alle Browser das Übergangsattribut nicht.

Leichte Standard. Die Animation beginnt mit niedriger Geschwindigkeit und beschleunigt sich dann und verlangsamt sich, bevor sie endet.

Die einfache Animation beginnt mit niedriger Geschwindigkeit.

Easy-Out-Animation endet mit niedriger Geschwindigkeit

Leichtigkeiten-in-out-Animation beginnt und endet mit niedriger Geschwindigkeit

Übergang: Hintergrund 5s Leichte;

Ein zB:

Kopieren Sie den Code