Heim >Web-Frontend >CSS-Tutorial >Ein paar kleine Kenntnisse über CSS3
Ein paar kleine Kenntnisse über CSS3
- 零到壹度Original
- 2018-03-21 11:42:051125Durchsuche
In diesem Artikel geht es hauptsächlich darum, ein paar kleine Kenntnisse über CSS3 mit Ihnen zu teilen. Ich hoffe, er kann Ihnen helfen. Schauen wir uns das unten mit dem Herausgeber an.
-
Box-Shadow fügt Schatten zum p-Element hinzu
Box-Shadow: H-Shadow V-Shadow-Unschärfe-Spread-Farbeinsatz;
H-Shadow: erforderlich. Die Position des horizontalen Schattens. Negative Werte erlaubt
v-shadow: Erforderlich. Die Position des vertikalen Schattens. Negative Werte zulassen
Unschärfe: Optional. Fuzzy-Distanz
Spread: optional. Die Größe der Schatten
Farbe ist optional. Die Farbe des Schattens. Die vollständige Liste der Farbwerte finden Sie unter CSS-Farbwerte
Einfügung Optional. Ändern Sie den inneren Schatten des inneren Schattens vom äußeren Schatten (am Anfang)
2.transform: Drehen Sie das p-Element
Kompatibilitätsprobleme:
-ms-transform:rotate(7deg); / * IE 9 */
-moz-transform:rotate(7deg); /* Firefox */
-webkit-transform:rotate(7deg); /* Safari und Chrome */
-o-transform:rotate(7deg); /* Opera */
3.transition: Bitte bewegen Sie den Mauszeiger auf das blaue p-Element, um den Übergangseffekt zu sehen.
ad846d1ec8764448f5d4e08a5ccc7b3f Bitte bewegen Sie den Mauszeiger auf das blaue p-Element, um den Übergangseffekt zu sehen. 94b3e26ee717c64999d7867364b1b4a3!DOCTYPE html> <html> <head> <style> p { width:100px; height:100px; background:blue; transition:width 2s; -moz-transition:width 2s; /* Firefox 4 */ -webkit-transition:width 2s; /* Safari and Chrome */ -o-transition:width 2s; /* Opera */ } p:hover { width:300px; } </style> </head> <body> <p></p>e388a4556c0f65e1904146cc1a846beea4b561c25d9afb9ac8dc4d70affff419Hinweis: 0d36329ec37a2cc24d42c7229b69747aDieses Beispiel funktioniert nicht im Internet Explorer. 94b3e26ee717c64999d7867364b1b4a3
36cc49f0c466276486e50c850b7e4956
73a6ac4ed44ffec12cee46588e518a5e
Das obige ist der detaillierte Inhalt vonEin paar kleine Kenntnisse über CSS3. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!