Définit un terme (un élément) dans une liste de définition
La propriété box-shadow est une des propriétés introduites dans CSS3 pour permettre aux développeurs d'ajouter des effets d'ombre aux éléments HTML
La propriété box-shadow est une des propriétés introduites dans CSS3 pour permettre aux développeurs d'ajouter des effets d'ombre aux éléments HTML.
La propriété box-shadow est utilisée pour appliquer une ou plusieurs ombres à un élément HTML.
La propriété CSS box-shadow est utilisée pour attacher une ou plusieurs ombres à un élément HTML. Vous pouvez créer des ombres portées sur n'importe quel élément HTML. Vous pouvez même leur donner un effet de « floue » (également connu sous le nom "flou gaussien"). Vous pouvez aussi spécifier de quelle couleur l'ombre devrait être et même préciser de combien qu'il est décalé de sa boîte (c'est-à-dire dans quelle mesure il devrait tomber à l'extérieur de l'élément HTML auquel vous appliquez l'ombre ).
La propriété box-shadow accepte une liste d’ombres séparée par des virgules, chacun spécifié par 2 à 4 valeurs, une couleur en option et un mot-clé facultatif inset.
Valeur par défaut : | aucun |
Héritée : | no |
Animer : | Oui. |
Version: | CSS3 |
Syntaxe JavaScript : | objet. style.boxShadow="10px 20px 30px #eee" |
Les nombres dans le tableau spécifient la version à partir de laquelle le navigateur prend totalement en charge la propriété box-shadow.
Les numéros suivis du préfixe - webkit- ou - moz- spécifier la première version qui a fonctionné avec ce préfixe.
Propriété | Navigateur |
| | | | |
box-shadow |
10.0 4.0 -webkit- |
9.0 |
4.0 3.5 -moz- |
5.1 3.1 -webkit- |
10.5 |
box-shadow: none|h-shadow v-shadow blur spread color|inset|initial|inherit;
Valeur | Description |
---|---|
none | Valeur par défaut, aucune ombre n’est appliquée |
h-shadow | Obligatoire. La position de l’ombre horizontale Les valeurs négatives sont autorisées |
v-shadow | Obligatoire. La position de l’ombre verticale Les valeurs négatives sont autorisées |
blur | Optionnel. La distance du flou |
spread | Optionnel. La taille de l'ombre. Les valeurs négatives sont autorisées |
color | Optionnel. La couleur de l'ombre. La valeur par défaut est noir. |
inset | Optionnel. Modifie l'ombre d'une ombre extérieure (de départ) à une ombre interne |
initial | Définit cette propriété à sa valeur par défaut. |
inherit | Hérite cette propriété de son élément parent. |
Remarque: Dans Safari (sur PC), le paramètre de couleur est nécessaire. Si vous ne spécifiez pas la couleur, l'ombre n’est pas affichée.
<!doctype html>
<html>
<head>
<style type="text/css">
div {
width:200px;
height:60px;
padding:10px;
border: 1px solid limegreen;
margin:30px;
}
.drop-shadow {
/* Safari et Chrome */
-webkit-box-shadow: 7px 7px 20px 0px rgba(0,0,0,0.3), 40px 40px 10px -40px rgba(0,0,0,0.6) inset;
/* Firefox */
-moz-box-shadow: 7px 7px 20px 0px rgba(0,0,0,0.3), 40px 40px 10px -40px rgba(0,0,0,0.6) inset;
/* Internet Explorer */
-ms-box-shadow: 7px 7px 20px 0px rgba(0,0,0,0.3), 40px 40px 10px -40px rgba(0,0,0,0.6) inset;
/* Opera */
-o-box-shadow: 7px 7px 20px 0px rgba(0,0,0,0.3), 40px 40px 10px -40px rgba(0,0,0,0.6) inset;
/* CSS3 */
box-shadow: 7px 7px 20px 0px rgba(0,0,0,0.3), 40px 40px 10px -40px rgba(0,0,0,0.6) inset;
}
</style>
</head>
<body>
<div class="drop-shadow">
Cet élément a une ombre exterieur et une ombre interieur
</div>
</body>
</html>