10 partages de connaissances CSS3 couramment utilisés

Avec l'évolution des temps, les connaissances front-end ont été mises à jour, dans le but de rendre l'expérience utilisateur meilleure et le travail plus efficace. L'émergence de CSS3 nous permet de créer des effets plus sympas de manière simple. Nous avons compilé 10 propriétés CSS3 couramment utilisées au travail pour y faire référence.

1. Effet de texte

Ombre : texte-ombre : décalage X décalage Y degré de flou couleur de l'ombre : 5px 5px 5px débordement de texte : dépassement de texte : points de suspension ; overflow:hidden; white-space:nowrap;

2. Font

@font-face { font-family: font name; src : fichier de police relatif ou absolu sur le chemin du serveur ;}
Appel : font-family : nom de la police ;

3. Déformation 3D

Déplacement : translation3d(x,y,z), translationZ(z) mise à l'échelle : scale3d( x,y ,z), scaleZ(z) rotation : rotate3d(x,y,z,angle), rotateZ(angle)

4. Disposition multi-colonnes

Colonnes de disposition multi-colonnes : ( largeur de colonne) || (nombre de colonnes); largeur de colonne : auto | (longueur); nombre de colonnes : espacement de colonne entier : normal || (column-rule-width)|(column-rule-style)|(column-rule-color) Définir l'étendue des colonnes sur les colonnes : aucune | tous

Modèle de boîte

boîte. -sizing : content-box | border-box | hériter

6. Attribut de mise à l'échelle gratuite

resize : aucun horizontal vertical | 🎜>

-webkit- (chrome et Safari), -moz- (firefox), -ms- (IE), -o- (opera)

8, bordure

Arrondi coins : border-radius : 5px 4px 3px 2px ; /* dans le sens des aiguilles d'une montre*/

Ombre : box-shadow : décalage de l'axe X Décalage de l'axe Y

[Rayon de flou de l'ombre] [Rayon d'expansion de l'ombre] [Couleur de l'ombre] [Méthode de projection];

/* Ombre extérieure par défaut*/Ombre extérieure : box-shadow:4px 2px 6px #333333;
Ombre intérieure : box-shadow:4px 2px 6px #333333 en médaillon ;
Ombres multiples : box-shadow:4px 2px 6px #f00, -4px -2px 6px #000, 0px 0px 12px 5px #33CC00 inset;
Image de bordure : border-image : méthode d'extension du pixel du chemin de l'image dans le sens des aiguilles d'une montre (répéter Répéter
tour étirement des tuiles) border-image:url(border.png) 30 30 round; -webkit-border-image:url(border.png) 30 30 round /* Safari 5 et versions antérieures */ -o-border-image:url; (border.png) 30 30 round; /* Opera */

9. Fond d'écran

taille : taille d'arrière-plan : auto | cover | contient Origine : background-origin : border-box | : background: [background-color] | [background-image] |

[background-position][/background-size] | | [background-origin],...

【Exemple】background:url(logoindex.png) pas de répétition en haut à gauche/75% 50% , url(logoindex.png) pas de répétition en bas à droite/50% 45 %;

10. Dégradé

Dégradé linéaire : //La valeur par défaut est de haut en bas, la direction et l'angle peuvent être modifiés
fond : -webkit- Linear-gradient(red , bleu); /* Safari 5.1 - 6.0 */ arrière-plan : -o-linear-gradient(rouge, bleu) ; /* Opera 11.1 - 12.0 */ arrière-plan : -moz-linear-gradient(rouge, bleu) ; Firefox 3.6 - 15 */ background: Linear-gradient(red, blue); /* Syntaxe standard*/
Dégradé radial : background: -webkit-radial-gradient(red, green, blue ); 6.0 */ arrière-plan : -o-radial-gradient(rouge, vert, bleu) ; /* Opera 11.6 - 12.0 */ arrière-plan : -moz-radial-gradient(rouge, vert, bleu) ; /* Firefox 3.6 - 15 * ; / background: radial-gradient(red, green, blue); /* Syntaxe standard*/

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!