Comment définir l'ombre de la bordure en CSS

L'attribut box-shadow peut être utilisé en CSS pour définir l'ombre de la bordure ; cet attribut ajoute une ou plusieurs ombres à la bordure et peut définir la longueur en pixels, la largeur, la distance de flou et la couleur de l'ombre ; la syntaxe "box-shadow:h-shadow v-shadow flou spread color inset".

L'environnement d'exploitation de ce tutoriel : système Windows 7, version CSS3&&HTML5, ordinateur Dell G3.

En CSS, nous pouvons définir l'ombre de la bordure via la propriété box-shadow et appliquer l'ombre à la zone de texte. Cette propriété définit la longueur en pixels, la largeur et la distance de flou de l'ombre ainsi que la couleur de l'ombre.

La propriété box-shadow peut ajouter une ou plusieurs ombres à la boîte. Cette propriété est une liste d'ombres séparées par des virgules, chacune spécifiée par 2 à 4 valeurs de longueur, une valeur de couleur facultative et le mot clé inset facultatif. La valeur de la longueur omise est 0.

Syntaxe :

box-shadow: h-shadow v-shadow blur spread color inset;

Valeur de l'attribut :

• h-shadow : fait référence au décalage horizontal de l'ombre, sa valeur peut être positive ou négative, positive Valeur, l'ombre est du côté droit de l'objet, valeur négative, l'ombre est du côté gauche de l'objet

• v-shadow : fait référence au décalage vertical de l'ombre , et sa valeur peut aussi être positive ou négative. , valeur positive, l'ombre est en bas de l'objet, valeur négative, l'ombre est en haut de l'objet

• flou. : rayon de flou de l'ombre ; ce paramètre est facultatif et ne peut être positif que si Lorsque sa valeur est 0, cela signifie que l'ombre n'a pas d'effet de flou. Plus la valeur est grande, plus le bord de l'ombre est flou

.

• spread : rayon d'expansion de l'ombre ; ce paramètre est facultatif et sa valeur peut être positive. Valeur négative, valeur positive, toute l'ombre sera étendue et agrandie, sinon, elle sera réduite

.

• color : couleur de l'ombre ; ce paramètre est facultatif. Lorsqu'aucune couleur n'est définie, le navigateur prendra la couleur par défaut, mais la couleur par défaut de chaque navigateur est différente, en particulier les navigateurs Safari et Chrome sous le noyau webkit. incolore, c'est-à-dire transparent. Il est recommandé de ne pas omettre ce paramètre

• inset : Définit l'ombre intérieure pour changer l'ombre de l'ombre extérieure (au début) ; peut être omis.

Remarque : **Plusieurs couches d'ombres, la couche la plus interne a la priorité la plus élevée, puis diminue en séquence.

Application pratique de box-shadow

Exemple 1

Ne pas définir l'axe X et l'axe Y, définissez le rayon de flou de l'ombre sur 15px, cela aura un effet dans le rayon lui-même, couleur

box-shadow: 0 0 15px #f00;

Exemple 2

Définissez l'axe X et Axe Y vers des valeurs positives (l'axe X positif pointe vers la droite et l'axe Y vers le bas)

box-shadow:4px 4px 15px #f00;

Exemple 3

box-shadow : l'encart est l'ombre intérieure de box-shadow, qui est la même que l'écriture ci-dessus. La différence est qu'un encart

box-shadow:0 0 15px #f00 inset;

est ajouté. Exemple 4

définit les couleurs de. les quatre côtés du carré doivent être différents, mais le rayon de flou de l'ombre est de 10px

box-shadow:-10px 0px 10px red,   /*左边阴影*/

            0px -10px 10px black,  /*上边阴影*/

            10px 0px 10px green,  /*右边阴影*/

            0px 10px 10px blue;" /*下边阴影*/ >

(Partage vidéo d'apprentissage : tutoriel vidéo CSS)

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!