Quels nouveaux styles d'attribut sont ajoutés à CSS3 ? Introduction aux nouvelles fonctionnalités couramment utilisées de CSS3

Quels sont les nouveaux styles d'attributs (nouvelles fonctionnalités) de CSS3 ? Ce chapitre se concentrera sur l'introduction de plusieurs nouveaux styles d'attributs (nouvelles fonctionnalités) couramment utilisés dans CSS3. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'il vous sera utile.

Avant d'introduire les nouveaux styles d'attributs (nouvelles fonctionnalités) de CSS3, nous devons d'abord savoir ce qu'est CSS3.

CSS est l'abréviation de Cascading Style Sheets.
CSS est un langage de balisage qui est un langage interprété par le navigateur et qui peut être exécuté directement par le navigateur sans compilation.
CSS est un langage de balisage utilisé pour représenter HTML ou XML.
CSS est recommandé et maintenu par le groupe de travail CSS du W3C.
CSS est un cours obligatoire pour les débutants en programmation. L'utilisation de styles CSS peut rendre la page belle.
La syntaxe CSS se compose de trois parties : sélecteur, propriété et valeur, par exemple : sélecteur {propriété : valeur}.

CSS3 est la dernière norme CSS, qui ajoute de nouveaux styles d'attributs, qui sont de nouvelles fonctionnalités. Ci-dessous, nous présenterons plusieurs nouvelles fonctionnalités (styles d'attribut) couramment utilisées en CSS3 :

1 Border

border-image Attribut.  : Il s'agit d'un attribut raccourci utilisé pour définir l'attribut raccourci de tous les attributs border-image-*.

attribut border-radius : est un attribut raccourci utilisé pour définir quatre attributs border-*-radius.

border-top-left-radius Définit le coin supérieur gauche
border-top-right-radius Définit le coin supérieur droit
border-bottom-right-radius Définit le coin inférieur gauche
border-bottom-right -radius définit le coin inférieur droit
border-top-left-radius : x y ; x représente le décalage de l'axe x du coin supérieur gauche, y représente le décalage de l'axe y, et vous pouvez définir des pourcentages et des pixels.

bordure-radius :;
Une valeur représente le coin supérieur gauche, le coin supérieur droit, le coin inférieur gauche et le coin inférieur droit, le tout
Deux valeurs représentent la première valeur en haut à gauche et en bas à droite La deuxième valeur représente le coin supérieur droit et le coin inférieur gauche
Les trois valeurs représentent : la première est en haut à gauche, la deuxième valeur est en haut à droite et en bas à gauche, la troisième valeur est en bas à droite
et les quatre sont respectivement en haut à gauche, en haut à droite, en bas à droite et en bas à gauche.

border-radius 0 0 0 0/ 0 0 0 0;
Les quatre premiers sont les décalages de l'axe x dans la direction x et les quatre derniers sont les décalages dans la direction de l'axe y

propriété box-shadow : Ajoutez une ou plusieurs ombres à la boîte.

Syntaxe : box-shadow : valeur
Description de la valeur :
(1) La première valeur : Npx, l'ombre est décalée de N pixels dans le sens horizontal, les nombres positifs vont vers la droite, les nombres négatifs vont vers la gauche
(2) La deuxième valeur : Npx, l'ombre est décalée de N pixels dans le sens vertical, les nombres positifs descendent, les nombres négatifs montent
(3) La troisième valeur : Taille de la plume (taille floue)
(4) La quatrième valeur : taille de l'ombre
(5) La cinquième valeur : couleur La valeur par défaut est le noir
. (6) Le sixième paramètre : ombre intérieure et extérieure. La valeur par défaut est l'ombre extérieure. L'ombre intérieure est incrustée
. (7) Vous pouvez écrire plusieurs ombres, séparées par des virgules
(8) L'ombre peut être abrégée, mais il convient de noter que certaines valeurs doivent être remplies par 0

Exemple complet :

p{
    border: 2px solid red;
    border-radius:25px; /* 创建圆角，100%为圆形 */
    box-shadow: 10px 10px 5px #888888；
}

2 . Background

attribut background-size : Spécifie la taille de l'image d'arrière-plan. (Attribut important)

Syntaxe : background-size : valeur

Description de la valeur :
(1) Lorsqu'il n'y a qu'une seule valeur, la largeur est étirée et la hauteur restera proportionnelle. Elle peut prendre en charge px ou pourcentage. Le pourcentage fait référence à la largeur et à la hauteur de la boîte elle-même
. (2) Lorsqu'il y a deux valeurs, la largeur et la hauteur seront respectivement étirées aux valeurs correspondantes et peuvent être déformées. Il peut prendre en charge px ou pourcentage. Le pourcentage fait référence à la largeur et à la hauteur de la boîte elle-même (3) contenir Lorsque la largeur ou la hauteur de l'image "touche" le bord de la boîte lors de la mise à l'échelle, le changement s'arrêtera (la largeur ou la hauteur ne doit en satisfaire qu'une seule)
(4) Sur la base de contain, assurez-vous qu'il n'y a pas d'espace vide. C'est l'effet de la couverture (la largeur et la hauteur doivent être satisfaites)

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

Syntaxe : background-origin : valeur

Description de la valeur :

(1) border-box : Ignorer la bordure et carreler directement à partir du point de départ de la bordure 0, 0 point
(2) padding-box : valeur par défaut, ignorer le remplissage et mosaïquer directement à partir du point de départ du remplissage 0, 0 point
(3) content-box : tuile commençant par la partie contenu, liée au remplissage

attribut background-image  : définit l'image d'arrière-plan de l'élément.

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

3. Effet de texte

attribut text-align-last : Définissez comment aligner la dernière ligne ou la ligne immédiatement avant la ligne forcée. casser .

text-emphasis属性：向元素的文本应用重点标记以及重点标记的前景色。 

text-justify属性：规定当 text-align，设置为“justify”时所使用的对齐方法。 

text-outline属性：规定文本的轮廓。 

text-overflow属性：规定当文本溢出包含元素时发生的事情。 

text-shadow属性：向文本添加阴影。 

text-wrap属性：规定文本的换行规则。 

word-wrap属性：允许对长的不可分割的单词进行分割并换行到下一行。

四、颜色与透明度

rgba（）

R:Red、G:Green、B:Blue、A:Alpha，R、G、B 取值范围0~255，A的取值范围是0-1。

RGBA可以用于所有使用颜色的地方
rgb三个值越小，颜色越黑
如果是纯色的背景，可以是使用rgba
如果是图片，可以脱离父子关系，让后用定位的方式来做。

hsla（）

H 色调 取值范围0~360，0/360表示红色、120表示绿色、240表示蓝色
S 饱和度取值范围0%~100%
L 亮度 取值范围0%~100%
A 透明度取值范围0~1

例：

background-color: hsla(120,100%,50%,1);

总结：以上就是本篇文的全部内容，希望能对大家的学习有所帮助。

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!