Introduction à l'utilisation de plusieurs balises d'attributs spéciaux dans la production de pages HTML_HTML/Xhtml_Web

Les attributs suivants sont peu compatibles avec les navigateurs.

1.transform:rotate(45deg)
2.border-top-left-radius Cet attribut permet d'ajouter une bordure arrondie à un élément
3.border-radius Cette propriété vous permet d'ajouter une bordure arrondie à un élément
4.box-shadow la propriété ajoute une ou plusieurs ombres à la boîte
5.text-shadow la propriété définit une ombre au texte
6.transition

Afin d'être mieux compatible avec les différents navigateurs, un préfixe doit être ajouté
-o- /*Navigateur Opera*/
-webkit- /*Webkit. navigateur du noyau Safari et chrome*/
-ms- /*IE 9*/
-moz- /*Firefox*/

1.transform:rotate(45deg)
Faites pivoter l'objet via l'attribut transform, où (45deg) est l'angle de rotation

transform:rotate(45deg);
-ms-transform:rotate(45deg); */
-o-transform:rotate(45deg); /*Navigateur Opera*/
-webkit-transform:rotate(45deg); /*Navigateur du noyau Webkit Safari et chrome*/
-moz- transform: rotate(45deg); /*Firefox*/

2.border-top-left-radius border-radius Cette propriété permet d'ajouter une bordure arrondie à un élément
ancien Vous pouvez choisir où ajouter une bordure arrondie
border-top-left-radius, border-top-right-radius, border-bottom-left-radius, border-bottom-right-radius
border- top-left -radius Cet attribut vous permet d'ajouter une bordure arrondie à un élément. C'est la même chose que border-radius, mais vous pouvez contrôler où la bordure arrondie doit être ajoutée

3. . L'attribut box-shadow ajoute une ou plusieurs ombres, l'attribut text-shadow définit l'ombre sur le texte
box-shadow : h-shadow || blur spread || ;
attribut : position de l'ombre horizontale|| distance de l'ombre floue|| Changer la couleur de l'ombre extérieure (début) en ombre intérieure
box-shadow:1px 1px 3px #292929 ;

text-shadow : h-shadow || v-shadow || flou ||
text-shadow : 0px -1px 0px #000; transition

property || timing-function || delay Spécifie le nom de la propriété CSS qui définit l'effet de transition|| Spécifie le nombre de secondes ou de millisecondes nécessaires pour terminer l'effet de transition| | Spécifie la courbe de vitesse de l'effet de vitesse || Définit l'effet de transition Quand démarrer
Actuellement, tous les navigateurs ne prennent pas en charge l'attribut de transition.
facilité par défaut. L'animation démarre à faible vitesse, puis accélère et ralentit avant de se terminer
l'animation d'accélération démarre à basse vitesse
l'animation d'accélération se termine à faible vitesse
d'accélération. l'animation commence et se termine à faible vitesse

transition: arrière-plan 5s facilité

ONE EG :

Copier le code

Code comme suit :

>largeur:100px;

hauteur:100px ;
arrière-plan:bleu
transition:largeur 2s;
-moz-transition:largeur 2s; transition:largeur 2s; /* Safari et Chrome * /
-o-transition:largeur 2s; /* Opera */
}
div:hover
{
largeur:300px; 🎜>}

à l'élément div bleu pour voir l'effet de transition.

Remarque : Cet exemple ne fonctionne pas dans Internet Explorer.

DEUX EG :





Copier le code

Le code est le suivant :

🎜>{

largeur:100px; hauteur:100px; arrière-plan:bleu; propriété de transition:arrière-plan durée de transition:5s

/* Firefox 4 *; /

-moz-transition-property:background;

-moz-transition-duration:5s
/* Safari et Chrome
-webkit-transition-property:background
-webkit; -transition- durée:5s;*/
transition:background 5s facilité
/* Opera */
-o-transition-property:background
-o-transition-duration:5s;
}
div:hover
{
fond:rouge
}
>

Veuillez déplacer le pointeur de la souris sur l'élément div bleu pour voir l'effet de transition.

Remarque : Cet exemple ne fonctionne pas dans Internet Explorer.