Introduction aux nouvelles fonctionnalités communes de CSS3

Nouveau sélecteur d'élément

E:nth-last-child(n), E:nth-of-type(n), E:nth-last-of-type(n), E:last-child, E:first-of-type, E:only-child, E:only-of-type, E:empty, E:checked, E:enabled, E:disabled, E::selection, E:not(s)

border-radius

également connu sous le nom d'attribut de coin arrondi, cet attribut est généralement utilisé pour arrondir les coins des images, comme les avatars.

border-radius: 50%;

Une autre méthode couramment utilisée de border-radius est l'animation CSS.

word-wrap & text-overflow

L'attribut word-wrap est utilisé pour indiquer que le navigateur coupe les phrases dans le mot pour éviter que la chaîne ne soit trop longue et incapable de le trouver. Le débordement se produit lorsque la période de pause naturelle se produit.

word-wrap: break-word;

text-overflow est utilisé pour le débordement de texte :

L'implémentation de l'abréviation sur une seule ligne est la suivante :

.oneline {
    white-space: nowrap; //强制文本在一行内输出
    overflow: hidden; //隐藏溢出部分
    text-overflow: ellipsis; //对溢出部分加上...
}

L'implémentation de l'abréviation sur plusieurs lignes est la suivante (principalement pour le noyau du webkit) :

.multiline {
    display: -webkit-box !important;
    overflow: hidden;
    
    text-overflow: ellipsis;
    word-break: break-all;
    
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

background

a principalement les trois attributs suivants :

• background-clip spécifie la zone de dessin de l'arrière-plan, et la valeur est border -box | padding-box | content-box

• background-origin spécifie la zone de positionnement de l'arrière-plan, la valeur est border padding | content

• background-size spécifie la taille de l'image d'arrière-plan, la valeur est [ | contenir

Tutoriel recommandé : css Quick Start

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!