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.
<
Bitte bewegen Sie den Mauszeiger auf das blaue p-Element, um den Übergangseffekt zu sehen.
!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>Hinweis: Dieses Beispiel funktioniert nicht im Internet Explorer.