Quels sont les nouveaux attributs de CSS3 ? Résumé des nouveaux attributs couramment utilisés en CSS3

Quels sont les nouveaux attributs du CSS3 ? Quiconque pose cette question doit savoir que CSS3 est une version améliorée de CSS. Ainsi, puisque CSS3 est une version améliorée, il ajoutera naturellement de nouveaux attributs. Ensuite, cet article vous présentera CSS3 couramment. utilisé de nouveaux attributs .

1. Nouvel attribut de bordure en CSS3

1. Border-color, un nouvel attribut en CSS3 : Définir plusieurs couleurs pour la bordure

p
  {
  border-style:solid;  
  border-color:#ff0000 #0000ff;
  }

En guise de digression ici, veuillez noter : l'attribut "border-width" ne fonctionnera pas s'il est utilisé seul. Veuillez d'abord définir la bordure en utilisant la propriété "border-style".

2. Border-image, un nouvel attribut de css3 : frame border

L'attribut border-image de css3 utilise une image pour créer une bordure

div
{
-webkit-border-image:url(border.png) 30 30 round; /* Safari 5 */
-o-border-image:url(border.png) 30 30 round; /* Opera */
border-image:url(border.png) 30 30 round;
}

2. 🎜>

Remarque : Internet Explorer ne prend pas en charge l'attribut border-image ; l'attribut border-image spécifie l'image utilisée comme bordure.

3. Border-radius, un nouvel attribut en css3 : bordure arrondie

div
{
border:2px solid;
border-radius:25px;
}

4. Effet d'ombre

div
{
box-shadow: 10px 10px 5px #888888;
}

box-shadow en CSS3 est utilisé pour ajouter une ombre à la boîte

2. Nouvel attribut d'arrière-plan en CSS3

1. Background-size, un nouvel attribut en CSS3 : spécifiez la taille de l'image d'arrière-plan

Avant CSS3, la taille de l'image d'arrière-plan était déterminée par la taille réelle de l'image. En CSS3, la taille de l'image d'arrière-plan peut être spécifiée, ce qui nous permet de réutiliser l'image d'arrière-plan dans différents environnements. Vous pouvez spécifier les dimensions en pixels ou en pourcentages. Si les dimensions sont spécifiées sous forme de pourcentage, elles sont relatives à la largeur et à la hauteur de l'élément parent.

div
{
background:url(img_flwr.gif);
background-size:80px 60px;
background-repeat:no-repeat;
}

2. Background-origin, un nouvel attribut en css3 : précisez où l'image de fond commence à s'afficher

L'image de fond peut être placée dans la zone content-box , padding-box ou border-box .

div
{
background-image:url('smiley.gif');
background-repeat:no-repeat;
background-position:left;
background-origin:content-box;
}

3. Background-clip, un nouvel attribut en css3 : Préciser où commencer à couper l'image de fond

div
{
background-color:yellow;
background-clip:content-box;
}

3. Nouveaux effets de texte en css3

1. Text-shadow, un nouvel attribut en css3 : text shadow

h1
{
text-shadow: 5px 5px 5px #FF0000;
}

Instructions :

(1) 24864c5449f228a950f333c68afb8370 et c67559f9433e1731ed8996149166e905 . Lorsqu'elle est spécifiée, la valeur du rayon est 0 ;

(2) l'ombre peut être une liste séparée par des virgules, telle que : text-shadow : 2px 2px 2px #ccc, 3px 3px 3px #ddd;

(3) Les effets d'ombre seront appliqués aux éléments dans l'ordre spécifié dans la liste des ombres

(4) Ces effets d'ombre peuvent se chevaucher, mais ne chevaucheront pas le texte lui-même ;

(5) L'ombre peut s'étendre en dehors des limites du conteneur, mais n'affectera pas la taille du conteneur.

2. Word-wrap, un nouvel attribut en CSS3 : retour automatique à la ligne

Si un mot est trop long, il ne peut pas dépasser une certaine zone, permettant ainsi mots à diviser et passer à la ligne suivante

p {word-wrap:break-word;}

4. Nouveaux effets d'animation en CSS3

1. effet de transformation :

CSS3 fournit des effets de déformation des éléments, également appelés transformations. Il peut faire pivoter, redimensionner et traduire des éléments.

Valeur de l'attribut : (1) transform ; (2) transform-origin : L'attribut transform-origin peut définir le point de départ de la transformation. Par défaut, le centre de l'élément est utilisé comme point de départ.

2. Effet d'animation

CSS3 fournit des effets d'animation similaires au contrôle des images clés Flash, qui est obtenu via l'attribut d'animation. Ensuite, l'attribut de transition précédent ne peut obtenir des effets d'animation qu'en spécifiant l'état initial et l'état final de l'attribut, ce qui présente certaines limitations.

animation La réalisation des effets d'animation se compose principalement de deux parties : 1. Déclarer une animation via des images clés similaires à l'animation Flash 2. Appeler l'animation déclarée par des images clés dans l'attribut d'animation ;

5. Nouveaux effets de transition en CSS3

1 Les effets de transition de transition

Les effets de transition sont généralement transmis. via Certaines actions CSS simples déclenchent des fonctions de transition en douceur, telles que :hover, :focus, :active, :checked, etc. CSS3 fournit l'attribut de transition pour implémenter cette fonction de transition.

Pour le nouveau contenu de transition et les nouveaux effets d'animation de CSS3, vous pouvez également vous référer au Manuel de référence de la dernière version de CSS3. Le contenu est très détaillé.

Cet article se termine ici. Ce qui précède est un résumé des nouveaux attributs communs en CSS3.

Recommandations associées :

Quels sont les nouveaux attributs d'arrière-plan de CSS3

Quels sont les nouveaux attributs d'arrière-plan de CSS3 et leur utilisation

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!