Quels sont les nouveaux attributs en CSS3

Les nouvelles propriétés de CSS3 incluent : word-wrap, word-break, text-shadow, border-radius, box-shadow, border-image, background-size, transform, transition, etc.

L'environnement d'exploitation de ce tutoriel : système Windows 7, version CSS3, ordinateur Dell G3.

Nouveaux attributs en CSS3

1. Effets de texte CSS3 :

• hanging-ponctuation : Spécifie si les caractères de ponctuation sont en dehors du filaire.
  

• uccion-trim : Spécifie s'il faut couper les caractères de ponctuation.

• text-align-last : Définit comment aligner la dernière ligne ou la ligne immédiatement avant une nouvelle ligne forcée.

• text-emphasis : applique une marque d'accentuation et la couleur de premier plan de la marque d'accentuation au texte de l'élément.

• text-justify : Spécifie la méthode d'alignement utilisée lorsque text-align est défini sur "justify".

• text-outline : Spécifie le contour du texte.

• text-overflow : Spécifie ce qui se passe lorsque le texte déborde de l'élément conteneur.

• text-shadow : ajoute une ombre au texte.

• text-wrap : Spécifie les règles de retour à la ligne pour le texte.

• word-break : Spécifie les règles de saut de ligne pour le texte non chinois, japonais et coréen.

• word-wrap : permet de diviser de longs mots indivisibles et de les passer à la ligne suivante.

2. Bordure CSS3 :

• border-radius : bordure arrondie CSS3.

• box-shadow : Utilisé pour ajouter une ombre à la boîte.

• border-image : image de bordure CSS3, vous pouvez utiliser des images pour créer des bordures.

3. CSS3 background :

• background-size : attribut spécifie la taille de l'image d'arrière-plan.

• background-origin : L'attribut précise la zone de positionnement de l'image d'arrière-plan.

• background-clip : Spécifie la zone de dessin de l'arrière-plan.

(Partage de vidéos d'apprentissage : tutoriel vidéo CSS)

Conversion CSS3 :

• transform applique une transformation 2D ou 3D à un élément.

• transform-origin vous permet de changer la position de l'élément en cours de transformation.

• transform-style spécifie la manière dont les éléments imbriqués sont affichés dans l'espace 3D.

• perspective Spécifie l'effet de perspective des éléments 3D.

• perspective-origin spécifie la position inférieure de l'élément 3D.

• backface-visibility définit si l'élément est visible lorsqu'il n'est pas face à l'écran.

5. Transition CSS3 :

Ajoutez des effets aux éléments lorsqu'ils se transforment d'un style à un autre.

• transition : attribut abrégé, utilisé pour définir quatre attributs de transition en un seul attribut.

• transition-property : Spécifie le nom de la propriété CSS qui applique la transition.

• transition-duration : Définit la durée de l'effet de transition. La valeur par défaut est 0.

• transition-timing-function : Spécifie la courbe temporelle de l'effet de transition. La valeur par défaut est « facilité ».

• transition-delay : Spécifie quand l'effet de transition commence. La valeur par défaut est 0.

6. Animation CSS3 : Grâce à CSS3, nous pouvons créer des animations, qui peuvent remplacer les images animées, les animations Flash et JavaScript dans de nombreuses pages Web.

• @keyframes : Spécifie l'animation.

• animation : propriété raccourcie pour toutes les propriétés d'animation, à l'exception de la propriété animation-play-state.

• animation-name : Spécifie le nom de l'animation @keyframes.

• animation-duration : Spécifie les secondes ou millisecondes nécessaires à l'animation pour terminer un cycle. La valeur par défaut est 0.

• animation-timing-function : Spécifie la courbe de vitesse de l'animation. La valeur par défaut est « facilité ».

• animation-delay : Spécifie quand l'animation démarre. La valeur par défaut est 0.

• animation-iteration-count : Spécifie le nombre de fois que l'animation est jouée. La valeur par défaut est 1.

• animation-direction : Spécifie si l'animation est jouée à l'envers lors du cycle suivant. La valeur par défaut est "normale".

• animation-play-state : Spécifie si l'animation est en cours d'exécution ou en pause. La valeur par défaut est "en cours d'exécution".

• animation-fill-mode : Spécifie l'état en dehors du temps d'animation de l'objet.

7. CSS3 plusieurs colonnes :

• column-count : Spécifiez le nombre de colonnes par lequel l'élément doit être divisé.

• column-fill : Spécifiez comment remplir la colonne

• column-gap : Spécifiez l'espace entre les colonnes

• column-rule : Abréviation de tous les attributs column-rule-*

• column-rule-color : Spécifiez la couleur de la bordure entre deux colonnes

• column-rule-style : Spécifiez le style de la bordure entre deux colonnes

• column-rule-width : Spécifiez l'épaisseur de la bordure entre deux colonnes

• column-span : Spécifiez le nombre de colonnes que l'élément doit s'étendre

• column-width : Spécifiez la largeur de la colonne

• colonnes : abréviation pour définir la largeur des colonnes et le nombre de colonnes

8. Interface utilisateur CSS3 :

• resize : L'attribut spécifie si l'élément peut être redimensionné par l'utilisateur.

• box-sizing : la propriété vous permet de définir exactement comment adapter un contenu spécifique à une certaine zone.

• outline-offset : La propriété décale le contour et dessine le contour au-delà du bord de la bordure.

• apparence : permet de faire ressembler un élément à un élément d'interface utilisateur standard.

• icône : offre aux créateurs la possibilité de définir des éléments sur leurs équivalents d'icônes.

• nav-down : Spécifie où naviguer lorsque vous utilisez la touche de navigation flèche vers le bas.

• nav-index : Spécifie l'ordre des onglets d'un élément.

• nav-left : Spécifie où naviguer à l'aide des touches de navigation fléchées vers la gauche.

• nav-right : Spécifie où naviguer à l'aide des touches de navigation fléchées droite.

• nav-up : Spécifie où naviguer lorsque vous utilisez la touche de navigation fléchée vers le haut.

Pour plus de connaissances liées à la programmation, veuillez visiter : Vidéo de programmation ! !

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!