Heim  >  Artikel  >  Web-Frontend  >  Einführung in die Verwendung mehrerer spezieller Attribut-Tags bei der Erstellung von HTML_HTML/Xhtml_Web-Seiten

Einführung in die Verwendung mehrerer spezieller Attribut-Tags bei der Erstellung von HTML_HTML/Xhtml_Web-Seiten

WBOY
WBOYOriginal
2016-05-16 16:39:551771Durchsuche

Die folgenden Attribute sind nicht sehr kompatibel mit Browsern.

1.transform:rotate(45deg)
2.border-top-left-radius Mit diesem Attribut können Sie einem Element einen abgerundeten Rahmen hinzufügen
3.border-radius Mit dieser Eigenschaft können Sie einem Element einen abgerundeten Rand hinzufügen
4.box-shadow-Eigenschaft fügt dem Feld einen oder mehrere Schatten hinzu
5.text-shadow-Eigenschaft legt einen Schatten auf den Text
6. Übergang

Um eine bessere Kompatibilität mit verschiedenen Browsern zu gewährleisten, muss ein Präfix
-o- /*Opera browser*/
-webkit- /*Webkit hinzugefügt werden Kernel-Browser Safari und Chrome*/
-ms- /*IE 9*/
-moz- /*Firefox*/

1.transform:rotate(45deg)
Drehen Sie das Objekt durch das Transformationsattribut, wobei (45deg) der Drehwinkel ist

transform:rotate(45deg);
-ms-transform:rotate(45deg); */
-o-transform:rotate(45deg); /*Opera-Browser*/
-webkit-transform:rotate(45deg); /*Webkit-Kernel-Browser Safari und Chrome*/
-moz- transform: rotieren(45deg); /*Firefox*/

2.border-top-left-radius border-radius Mit dieser Eigenschaft können Sie einem Element einen abgerundeten Rand hinzufügen
former Sie können auswählen, wo ein abgerundeter Rand hinzugefügt werden soll
border-top-left-radius, border-top-right-radius, border-bottom-left-radius, border-bottom-right-radius
border- top-left -radius Mit diesem Attribut können Sie einem Element einen abgerundeten Rand hinzufügen. Es ist dasselbe wie border-radius, Sie können jedoch steuern, wo der abgerundete Rand hinzugefügt werden muss . Das Box-Shadow-Attribut fügt dem Text einen oder mehrere Schatten hinzu ;
Attribut: horizontale Schattenposition||. Ändere den äußeren Schatten (Anfang) in den inneren Schatten: 1px 1px 3px #292929;
Textschatten: h-Schatten ||. Übergang
Eigenschaft ||. Verzögerung
Gibt den Namen der CSS-Eigenschaft an, die den Übergangseffekt festlegt|| |. Gibt die Geschwindigkeitskurve des Geschwindigkeitseffekts an.|| Definiert den Übergangseffekt. Wann gestartet werden soll

Derzeit unterstützen nicht alle Browser das Übergangsattribut.
Standardeinstellung vereinfachen. Die Animation beginnt mit niedriger Geschwindigkeit, beschleunigt dann und verlangsamt sich, bevor sie endet.
Ease-in-Animation beginnt mit niedriger Geschwindigkeit.
Ease-out-Animation endet mit niedriger Geschwindigkeit. Unsere Animation beginnt und endet mit niedriger Geschwindigkeit
transition:background 5s Ease
ONE EG:





Code kopieren


Code wie folgt:



>< div>

Bitte bewegen Sie den Mauszeiger auf das blaue div-Element, um den Übergangseffekt zu sehen.

Hinweis: Dieses Beispiel funktioniert nicht im Internet Explorer.

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel:HTML-CSS-JS-Implementierung des Tab-Label-Seiten-Beispielcodes_HTML/Xhtml_WebseitenproduktionNächster Artikel:HTML-CSS-JS-Implementierung des Tab-Label-Seiten-Beispielcodes_HTML/Xhtml_Webseitenproduktion

In Verbindung stehende Artikel

Mehr sehen