web-dev-qa-db-fra.com

Ombre portée sur un conteneur div?

J'ai une boîte de recherche avec suggestion automatique qui affiche une div en dessous avec plusieurs suggestions de chaînes de recherche (comme Google). Est-il possible d'avoir une ombre portée sur la boîte de suggestion automatique avec CSS ou aurai-je besoin d'un script quelconque? J'ai essayé une image d'arrière-plan mais le nombre de suggestions peut varier de 1 à 10 ou 15.

Je préfère quelque chose qui fonctionne dans IE6 + et FF2 + si possible. Merci!

csshtmldropshadow
47
Mike

Cela fonctionne pour moi sur tous mes navigateurs:

.shadow {
-moz-box-shadow: 0 0 30px 5px #999;
-webkit-box-shadow: 0 0 30px 5px #999;
}

puis donnez à n'importe quel div la classe shadow, aucune jQuery requise.

73
Scott H

CSS3 a un box-shadow propriété. Les préfixes du fournisseur sont nécessaires pour le moment pour une compatibilité maximale du navigateur.

div.box-shadow {
    -webkit-box-shadow: 2px 2px 4px 1px #fff;
    box-shadow: 2px 2px 4px 1px #fff;
}

Un générateur est disponible sur css3please .

12
alex
.shadow {
    -moz-box-shadow:    3px 3px 5px 6px #ccc;
    -webkit-box-shadow: 3px 3px 5px 6px #ccc;
    box-shadow:         3px 3px 5px 6px #ccc;
}
3
Biswadeep Sarkar

La façon la plus compatible de le faire est probablement de créer un deuxième div sous votre boîte de suggestion automatique de la même taille que la boîte elle-même, avec quelques pixels vers le bas et vers la droite. Vous pouvez utiliser JS pour le créer et le positionner, ce qui ne devrait pas être très difficile si vous utilisez un framework assez moderne.

2
Brant Bobby

vous voudrez peut-être essayer cela. Semble être assez facile et fonctionne sur IE6 et Moz au moins.

<div id ="show" style="background-color:Silver;width:100px;height:100px;visibility:visible;border-bottom:outset 1px black;border-right:outset 1px black;" ></div>

La syntaxe générale est la suivante: border- [postion]: [border-style] [border-width] [border-color] | hériter

La liste des [style de bordure] disponibles est:

  • pointillé
  • à pois
  • double
  • rainure
  • caché
  • encart
  • none
  • début
  • crête
  • solide
  • hériter
2
The Machine