Exemple
Ajouter un box-shadow à un <div> élément:
div
{
box-shadow: 10px 10px 5px #888888;
}
Essayez - le vous - même » Plus "Try it Yourself" exemples ci - dessous.
Définition et utilisation
La propriété box-shadow attache un ou plusieurs ombres à un élément.
| Valeur par défaut: | none |
|---|---|
| Hérité: | no |
| Animable: | yes. Read about animatable Try it |
| Version: | CSS3 |
| Syntaxe JavaScript: | object .style.boxShadow="10px 20px 30px blue" Try it |
support du navigateur
Les chiffres du tableau indiquent la première version du navigateur qui prend en charge entièrement la propriété.
Numbers suivis par -webkit- ou -moz- précisent la première version qui a travaillé avec un préfixe.
| Propriété | |||||
|---|---|---|---|---|---|
| box-shadow | 10.0 4.0 -webkit- | 9.0 | 4.0 3.5 -moz- | 5.1 3.1 -webkit- | 10.5 |
Syntaxe CSS
box-shadow: none|h-shadow v-shadow blur spread color |inset|initial|inherit; Note: La propriété box-shadow attache un ou plusieurs ombres à un élément. La propriété est une liste séparée par des virgules des ombres, chacun spécifié par 2-4 valeurs de longueur, une couleur optionnelle, et un mot-clé en médaillon en option. longueurs omises sont 0.
propriété valeurs
| Valeur | La description | Joue-le |
|---|---|---|
| none | Valeur par défaut. Pas d'ombre est affiché | Joue-le " |
| h-shadow | Champs obligatoires. La position de l'ombre horizontale. Les valeurs négatives sont autorisées | Joue-le " |
| v-shadow | Champs obligatoires. La position de l'ombre verticale. Les valeurs négatives sont autorisées | Joue-le " |
| blur | Optionnel. La distance de flou | Joue-le " |
| spread | Optionnel. La taille de l'ombre. Les valeurs négatives sont autorisées | Joue-le " |
| color | Optionnel. La couleur de l'ombre. La valeur par défaut est noir. Regardez couleur CSS valeurs pour une liste complète des valeurs de couleurs possibles. Remarque: Dans Safari (on PC) le paramètre de couleur est nécessaire. Si vous ne spécifiez pas la couleur, l'ombre ne sont pas affichées du tout. | Joue-le " |
| inset | Optionnel. Change l'ombre d'une ombre extérieure (outset) à une ombre intérieure | Joue-le " |
| initial | Définit cette propriété à sa valeur par défaut. Lisez à propos initial | Joue-le " |
| inherit | Hérite cette propriété de son élément parent. Lisez à propos de hériteront |
Autres exemples
Images jetées sur la table
Cet exemple montre comment créer "polaroid" images et faire pivoter les images.
Pages associées
CSS3 tutoriel: CSS3 Borders
Référence HTML DOM: boxShadow property