English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
box-The shadow CSS property applies one or more shadow effects to the box of an element.
The following table describes the usage and version history of this attribute, as well as the syntax of using this attribute in JavaScript scripts.
| Default value: | none |
|---|---|
| Applies to: | All elements. It also applies to::first-letter。 |
| Inheritance: | None |
| Animação suportada: | is.View animation properties。 |
| Version: | CSS3new feature |
| JavaScript syntax: | object.style.boxShadow="8px 8px 6px #000000" |
The syntax of this attribute is as follows:
box-shadow: [ , , ... shadowN] | none | initial | inherit where shadow is: [ inset [ offset-x offset-y blur-radius spread-radius color ] ]
Les exemples suivants montrent comment utiliser box-Attribut ombre.
.ombre{
largeur: 150px;
hauteur: 150px;
fond: #ccc;
bord: 1px solide #999;
box-ombre: 2px 2px 4px 2px #999;
}Testez pour voir‹/›Vous pouvez utiliser le mot-clé inset pour appliquer une ombre à l'intérieur de la boîte de l'élément. L'ombre intégrée est dessinée à l'intérieur du bord, au-dessus du fond mais en dessous du contenu de l'élément.
.ombre-inside{
largeur: 150px;
hauteur: 150px;
fond: #ccc;
bord: 1px solide #999;
box-ombre: inset 0 0 6px 2px #999;
}Testez pour voir‹/›Le tableau suivant décrit les valeurs de cet attribut.
| Valeur | Description |
|---|---|
| Obligatoire -Il est nécessaire de spécifier les valeurs suivantes pour rendre l'attribut valide. | |
| offset-x | La première valeur de longueur spécifie la distance horizontale de l'ombre. Une valeur positive dessine une ombre vers la droite du cadre, tandis qu'une valeur négative dessine une ombre vers la gauche du cadre. |
| offset-y | La deuxième valeur de longueur spécifie la distance verticale de l'ombre. Une valeur positive décale l'ombre vers le bas, tandis qu'une valeur négative décale l'ombre vers le haut de l'élément. |
| Optionnel -Les valeurs suivantes sont optionnelles. | |
| blur-radius | la troisième valeur de longueur est la distance de flou. Plus cette valeur est grande, plus le flou est grand, donc l'ombre est plus grande et plus claire. La valeur par défaut est 0, l'ombre est très aiguë. Les valeurs négatives ne sont pas autorisées. |
| spread-radius | quatrième longueur est la distance d'extension. Une valeur positive fait que la forme de l'ombre s'étend dans toutes les directions du rayon spécifié. Une valeur négative fait que la forme de l'ombre se rétrécit. |
| color | La couleur est la couleur de l'ombre. Cette valeur peut être n'importe quelvaleur de couleur。Si non spécifié, il est généralementcolorvaleur de l'attribut. |
| inset | Si présente, changez l'ombre projetée de l'ombre externe à l'ombre interne. L'ombre intégrée est dessinée à l'intérieur du bord, au-dessus du fond mais en dessous du contenu de l'élément. |
| none | L'ombre ne sera pas affichée. C'est la valeur par défaut. |
| initial | Réinitialisez cette propriété à sa valeur par défaut. |
| inherit | Si spécifié, l'élément lié utilise le box de son élément parent-Valeur de l'attribut ombre. |
box-Compatibilité du navigateur pour l'attribut ombre, les numéros dans le tableau suivant représentent la version minimale du navigateur prenant en charge cette propriété ; tous les navigateurs populaires prennent en charge cette propriété.
|
Voir les tutoriels suivants :CSS3ombre，Éléments pseudo de CSS。
Attributs associés :text-ombre。