CSS3 Ombres (Shadows)

Utiliser CSS3，vous pouvez appliquer des ombres aux éléments.

Utiliser CSS3Ombres

CSS3Vous permet de rajouter des effets d'ombre aux éléments comme dans Photoshop, sans utiliser d'images. En CSS3Avant, les images de coupe étaient utilisées pour créer des ombres autour des éléments ennuyeux.

La section suivante présentera comment appliquer des ombres aux textes et aux éléments.

CSS3 box-L'attribut ombre

box-L'attribut ombre peut être utilisé pour ajouter des ombres dans la boîte de l'élément. Vous pouvez même appliquer plusieurs effets d'ombre en utilisant une liste de nuances séparées par des virgules. La syntaxe de base pour créer une ombre de boîte peut être donnée de la manière suivante :

box-ombre: offset-x offset-y flou-radius couleur;

Le boîte-Les composants de l'attribut ombre ont les significations suivantes :

• offset-x —Définir la quantité d'offset horizontal.

• offset-y —Définir l'offset vertical de l'ombre.

• flou-radius —Définir le rayon flou. Plus la valeur est grande, plus l'ombre est floue, et les bords de l'ombre sont plus flous. Les valeurs négatives ne sont pas autorisées.

• color —Définir la couleur de l'ombre. Si elle est omise ou non spécifiée, elle adopteracolorles valeurs de l'attribut.

Veuillez vous référer à CSS3 box-Pour en savoir plus sur d'autres valeurs possibles, consultez l'attribut ombre

.box{
　　　　width:　200px;
　　　　height:　150px;
　　　　background: #ccc;
　　　　box-ombre:　5px　5px　10px #999;
}

De même, vous pouvez ajouter plusieurs ombres en utilisant une liste séparée par des virgules :

.box{
　　　　width:　200px;
　　　　height:　150px;
　　　　background: #000;
　　　　box-ombre:　5px　5px　10px rouge,　10px　10px　20px jaune;
}

CSS3 text-L'attribut ombre

Vous pouvez utiliser text-L'attribut ombre applique des effets d'ombre au texte. Vous pouvez également utiliser avec box-La même syntaxe que pour ombre s'applique pour appliquer plusieurs ombres au texte.

h1　{
　　　　text-ombre:　5px　5px　10px #666;
}
h2　{
　　　　text-ombre:　5px　5px　10px rouge,　10px　10px　20px jaune;
}