Maison > Article > interface Web > modification de l'interface utilisateur css3 - révision
1. La propriété box-shadow ajoute une ou plusieurs ombres à la boîte.
Syntaxe : box-shadow : h-shadow v-shadow flou spread color inset
h-shadow est requis, la position de l'ombre horizontale, les valeurs négatives sont autorisées.
v-shadow est requis, la position de l'ombre verticale, les valeurs négatives sont autorisées.
flou Distance de flou facultative.
propagation facultative, la taille de l'ombre.
couleur en option, la couleur de l'ombre.
l'encart est facultatif, changeant l'ombre extérieure (début) en ombre de l'étape de contenu.
Exemple :
p>
Figure
Exemple :
fond : jaune boîte-ombre : 4px 4px 3px #000 en médaillon ; }
> Résultat : Comme le montre la figure
2.border-radius
L'élément ajoute une bordure arrondie. Syntaxe : border-radius : 1-4 length | % / 1-4 length | %; Remarque : L'ordre des quatre valeurs est le suivant : coin supérieur gauche, coin supérieur droit, coin inférieur droit, coin inférieur gauche.
Bordure-rayon : 2em 1em 4em / 0.5em 3em ; Équivalent à :
3em ;
bordure-bas-droit-rayon :4em 0.5em;
bordure-bas-gauche- radius:1em 3em;
border-radius prend en charge la valeur en pourcentage %
Exemple :
style>
.radius-test1 { width: 100px; height: 100px;
margin: 0 auto; : 50px solid #cd0000;
border-radius: 50%; }
style>
3.border-image
Arrière-plan de la bordure de l'élément Utilisé pour définir les attributs : Border-image-source Le chemin de l'image utilisée dans la bordure border-image-slice image border Offset inward Border-image-width La largeur de la bordure de l'image
Border-image-outset Le quantité par laquelle la zone de l'image de la bordure dépasse la bordure
Border-image-repeat Indique si la bordure de l'image est en mosaïque (répétée)
Arrondie ou étirée par défaut.
La bordure divise l'image-bordure en 9 parties : bordure-image-haute, image-bordure-droite
image-bordure-bas, image-bordure-gauche, image-bordure-haut-gauche
bordure -image en haut à droite, bordure en bas à gauche,
main Bas avant avant in in in in \
Résultat : comme indiqué
>
4.dégradé
Il est divisé en dégradé linéaire (dégradé linéaire) et dégradé radial (dégradé radial)
Fond de syntaxe : -webkit-linear-gradient(top,#ccc, #000); Paramètres : Il y a trois paramètres au total. Le premier paramètre représente la direction du dégradé linéaire, du haut vers le bas,
gauche signifie de gauche à droite. en haut, cela signifie du coin supérieur gauche au coin inférieur droit.Les deuxième et troisième paramètres sont respectivement la couleur du point de départ et la couleur du point final. Exemple : Background:-webkit-linear-gradient(left , red 50px, jaune 200px }
Exemple :Vous pouvez remplir l'angle
elle dans dans dans sur dans sur l'angle >> .gradient{width:300px; height: 180px; Background:-webkit-linear-gradient(45deg,
red 50px, jaune 200px);}
& lt;/style & gt;
& lt; p class = "geadient" & gt; & lt;/p & gt;
Résultats : comme indiqué dans la figure
Dégradé radial à gradient radial.
La forme du dégradé est une ellipse (représentant une ellipse) le coin le plus éloigné (représentant le coin le plus éloigné)
Syntaxe : radial-gradient (rouge, vert, bleu)
Exemple :
< style>
background:-webkit-radial-gradient (cercle, rouge, jaune, vert);}
t ; .gradient{width:300px; height: 180px;
background:-webkit-radial-gradient(
ellipse, rouge, jaune, vert);}
Exemple : L'utilisation de mots-clés de différentes tailles.
côté, bleu, vert, jaune, noir);>
La fonction Repeating-radial-gradient() est utilisée pour répéter le dégradé radial Exemple :
background: -webkit-repeating- linear- gradient (15deg,vert 0,
vert 10px,#fff 10px,#fff 20px); :3s;}
.wrap:hover .box{ margin-
left:-100px;
> Résultat : Comme le montre la figure
5
.background-origin
Spécifie la position par rapport à l'attribut background-position Positioning
Syntaxe : background-origin: padding-box|border-box|content-box;
L'image d'arrière-plan de la boîte de remplissage est positionnée par rapport à la boîte de remplissage.
.background_origin{width: 300px;height: 150px ;border: 1px solid black; padding: 35px; background-image:url('1.png');
6.background-clip
Spécifie la zone de dessin de l'arrière-plan
Valeur : border-box L'arrière-plan est découpé à la zone de bordure
Padding-box L'arrière-plan est tronqué Recadré à la zone de remplissage
Content-box L'arrière-plan est tronqué à la zone de contenu
no-clip : Recadrez l'arrière-plan vers l'extérieur à partir de la zone de bordure.
Exemple :
-clip:content-box;border:2px solid #92b901;}