Maison > Article > interface Web > Quelques petites connaissances sur CSS3

Quelques petites connaissances sur CSS3

零到壹度original: 2018-03-21 11:42:051077parcourir

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. ad846d1ec8764448f5d4e08a5ccc7b3f Veuillez déplacer le pointeur de la souris sur l'élément p bleu pour voir l'effet de transition. 94b3e26ee717c64999d7867364b1b4a3

e388a4556c0f65e1904146cc1a846beea4b561c25d9afb9ac8dc4d70affff419Remarque : 0d36329ec37a2cc24d42c7229b69747aCet exemple ne fonctionne pas dans Internet Explorer. 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>
```
36cc49f0c466276486e50c850b7e4956
73a6ac4ed44ffec12cee46588e518a5e

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Créez une boîte de dialogue "Chargement" avec CSSArticle suivant：Créez une boîte de dialogue "Chargement" avec CSS

Articles Liés

Voir plus