Maison > interface Web > tutoriel CSS > Quelles sont les nouvelles fonctionnalités de CSS3 ? Quels sont les nouveaux attributs ? (Résumer)

Quelles sont les nouvelles fonctionnalités de CSS3 ? Quels sont les nouveaux attributs ? (Résumer)

藏色散人
Libérer: 2018-09-30 16:34:43
original
6873 Les gens l'ont consulté

L'objectif principal de cet article est de résumer et de vous présenter quelles sont les nouvelles fonctionnalités de CSS3 ?

Tout d’abord, tout le monde devrait savoir ce qu’est le CSS ?

En termes simples, CSS est une feuille de style en cascade, un langage informatique utilisé pour exprimer des styles de fichiers tels que HTML ou XML. Et css3 est la dernière norme CSS. Tant que nous maîtriserons les différents attributs de style du CSS et du CSS3, je pense qu'il sera facile pour tout le monde de créer des pages belles et généreuses.

Puisque CSS3 est le dernier standard de CSS, quelles sont les nouvelles fonctionnalités de CSS3 ?

Ci-dessous, nous combinons des exemples de code simples pour résumer plusieurs nouvelles fonctionnalités importantes, à savoir de nouveaux attributs !

1. RGBA et transparence

RGBA est une extension du modèle de couleur RVB. Essentiellement, il ajoute également un canal alpha à l'élément défini, c'est-à-dire qu'en plus des trois couleurs rouge, vert et bleu, un canal représentant la transparence est également ajouté, parmi lesquels RVB. Les valeurs représentent respectivement le rouge, le vert et le bleu, tandis que les valeurs alpha vont de 0 à 1 (une décimale).

2. Attribut d'arrière-plan

background-image : Définissez l'image d'arrière-plan de l'élément.

background-origin : Spécifie la zone de positionnement de l'image d'arrière-plan.

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

background-repeat : définissez si et comment répéter l'image d'arrière-plan.

3. Attribut de retour à la ligne

L'attribut de retour à la ligne permet de renvoyer des mots longs ou des adresses URL à la ligne suivante.

Remarque : tous les principaux navigateurs prennent en charge l'attribut word-wrap.

Syntaxe de base :

word-wrap: normal|break-word;
Copier après la connexion

4. Attribut text-shadow

Attribut text-shadow : Définit une ombre sur le texte. .

syntaxe de base texte-ombre :

text-shadow: 5px 5px 5px #FF0000;
Copier après la connexion

les paramètres représentent respectivement : l'ombre horizontale, l'ombre verticale, la distance de flou, la couleur de l'ombre

cinq ; , attribut font-face

attribut font-face : Définissez votre propre police

Dans la nouvelle règle @font-face, vous devez d'abord définir le nom de la police (comme myFirstFont), puis pointez sur le fichier de police.

6. attribut border-radius

attribut border-radius : Il s'agit d'un attribut abrégé utilisé pour définir quatre attributs border-*-radius.

Syntaxe de base :

border-radius: 1-4 length|% / 1-4 length|%;
Copier après la connexion

Remarque : Cet attribut vous permet d'ajouter des bordures arrondies aux éléments !

7. attribut border-image

border-image : Spécifie l'image sous forme de bordure entourant l'élément div

syntaxe de base border-image :

border-image: url(border.png) 30 30 round
Copier après la connexion

8. attribut box-shadow

attribut box-shadow : ajoutez une ou plusieurs ombres à la boîte. (Box shadow)

Syntaxe de base de box-shadow :

box-shadow: 10px 10px 5px #888888
Copier après la connexion

9. Requête multimédia

La requête multimédia définit deux ensembles de CSS, lorsque navigation Différentes propriétés sont adoptées lorsque la taille du conteneur change.

Cet article est un résumé de plusieurs attributs importants des nouvelles fonctionnalités de CSS3. Dans nos questions d'entretien CSS, les questions sur les nouvelles fonctionnalités de CSS3 sont également très courantes. J'espère que cet article sera utile aux amis dans le besoin !

Si vous souhaitez en savoir plus sur les points de connaissances css/css3, vous pouvez suivre le tutoriel vidéo CSS/tutoriel vidéo CSS3 de PHP chinois, tout le monde est invité à se référer à et apprenez !

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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal