Comment créer une ombre intérieure en CSS

La propriété CSS3 box-shadow est utilisée pour décrire un ou plusieurs effets d'ombre d'un élément. Cette propriété vous permet d'obtenir presque tous les effets d'ombre souhaités. Cependant, la syntaxe et la valeur de l'attribut box-shadow sont très flexibles, ce qui est un peu difficile à comprendre pour les novices.

Adresse fictive : https://www.html.cn/tool/css3Preview/Box-Shadow.html

CSS Code :

/* offset-x | offset-y | color */
box-shadow: 60px -16px teal;
 
/* offset-x | offset-y | blur-radius | color */
box-shadow: 10px 5px 5px black;
 
/* offset-x | offset-y | blur-radius | spread-radius | color */
box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);
 
/* inset | offset-x | offset-y | color */
box-shadow: inset 5em 1em gold;
 
/* Any number of shadows, separated by commas */
box-shadow: 3px 3px red, -1em 0 0.4em olive;
 
/* Global keywords */
box-shadow: inherit;
box-shadow: initial;
box-shadow: unset;

Description de la valeur :

encart : L'ombre par défaut est à l'extérieur de la bordure. Après avoir utilisé l'encart, l'ombre se trouve à l'intérieur de la bordure (même une bordure transparente), au-dessus de l'arrière-plan et en dessous du contenu. Certaines personnes aiment aussi mettre cette valeur à la fin, et les navigateurs la prennent également en charge.

8b89863bbb9a724179580669ccdd6d16 d1d21daad911d430a139ccdb7ee6c1d6 : ce sont les deux premières valeurs d82af2074b26fcfe177e947839b5d381 8b89863bbb9a724179580669ccdd6d16 définit le décalage horizontal. S'il s'agit d'une valeur négative, l'ombre sera sur le côté gauche de l'élément. d1d21daad911d430a139ccdb7ee6c1d6 définit le décalage vertical. S'il est négatif, l'ombre sera placée au-dessus de l'élément. Voir 47c70fed49d64863dd1237ac5d66c7ba pour les unités disponibles. Si les deux valent 0, alors l'ombre est derrière l'élément. À ce stade, si 747111f72d266ea1b5d91cda9f8aa39e ou 5e387985f926f4cd5497444dde74a02d est défini, un effet de flou se produit.

747111f72d266ea1b5d91cda9f8aa39e : il s'agit de la troisième valeur d82af2074b26fcfe177e947839b5d381 Plus la valeur est élevée, plus la zone de flou est grande et plus l'ombre est grande et claire. Ne peut pas être une valeur négative. La valeur par défaut est 0, auquel cas les bords de l'ombre sont nets.

5e387985f926f4cd5497444dde74a02d : Il s'agit de la quatrième valeur d82af2074b26fcfe177e947839b5d381 En prenant une valeur positive, l'ombre s'agrandit ; en prenant une valeur négative, l'ombre rétrécit. La valeur par défaut est 0, auquel cas l'ombre est aussi grande que l'élément.

b10fb37415d019cfffa8c4d7366c607f : Voir b10fb37415d019cfffa8c4d7366c607f S'il n'est pas spécifié, il est déterminé par le navigateur - généralement la valeur de la couleur, mais Safari utilise actuellement le transparent.

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!