Quels sont les nouveaux attributs en CSS3-Questions et réponses frontales-php.cn

Quels sont les nouveaux attributs en CSS3

青灯夜游

Libérer： 2023-01-04 09:34:23

original

19672 Les gens l'ont consulté

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.

Quels sont les nouveaux attributs en CSS3

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.