Cet article parle principalement de quelques petites connaissances sur CSS3 avec vous, j'espère qu'il pourra vous aider. Jetons un coup d'œil avec l'éditeur ci-dessous.
box-shadow ajoute une ombre à l'élément p
box-shadow : h-shadow v-shadow flou répartir l'encart de couleur ;
h-shadow : obligatoire . La position de l'ombre horizontale. Valeurs négatives autorisées
v-shadow : Obligatoire. La position de l'ombre verticale. Autoriser les valeurs négatives
flou : facultatif. Distance floue
spread : facultatif. La taille de l'ombre
couleur est facultative. La couleur de l'ombre. Retrouvez la liste complète des valeurs de couleur dans CSS Color Values
encart Facultatif. Changer l'ombre intérieure de l'ombre intérieure par rapport à l'ombre extérieure (au début)
2.transform : Rotation de l'élément p
Problèmes de compatibilité :
-ms-transform:rotate(7deg); 🎜>/ * IE 9 */-moz-transform:rotate(7deg);
/* Firefox */-webkit-transform:rotate(7deg); */-o-transform:rotate(7deg);
/* Opera */3.transition : Veuillez déplacer le pointeur de la souris sur l'élément p bleu pour voir l'effet de transition. <
Veuillez déplacer le pointeur de la souris sur l'élément p bleu pour voir l'effet de transition.
Remarque : Cet exemple ne fonctionne pas dans Internet Explorer.
!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>