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.

 : ce sont les deux premières valeurs 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. définit le décalage vertical. S'il est négatif, l'ombre sera placée au-dessus de l'élément. Voir pour les unités disponibles. Si les deux valent 0, alors l'ombre est derrière l'élément. À ce stade, si ou est défini, un effet de flou se produit.

 : il s'agit de la troisième valeur 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.

: Il s'agit de la quatrième valeur 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.

: Voir 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!