sombras - sombra interior css

¿Sombra en un contenedor div?

Question

Tengo un cuadro de búsqueda con sugerencia automática que muestra un div debajo de él con múltiples sugerencias de cadenas de búsqueda (como google). ¿Es posible tener sombra paralela en el cuadro de sugerencia automática con CSS o necesitaré algún tipo de script? Probé una imagen de fondo, pero el número de sugerencias puede variar de 1 a 10 o 15.

Preferiría algo que funcione en IE6 + y FF2 + si es posible. ¡Gracias!

Answer 1

CSS3 tiene una propiedad box-shadow . Los prefijos del proveedor son necesarios en este momento para la máxima compatibilidad del navegador.

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

Hay un generador disponible en css3please .

Answer 2

Esto funciona para mí en todos mis navegadores:

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

entonces solo dale a cualquier div la clase de sombra, no se requiere jQuery.

Answer 3

La forma más compatible de hacer esto probablemente será crear un segundo div debajo de su cuadro de sugerencia automática del mismo tamaño que el cuadro en sí, movido algunos píxeles hacia abajo y hacia la derecha. Puede usar JS para crearlo y posicionarlo, lo que no debería ser terriblemente difícil si utiliza un marco bastante moderno.

Answer 4

Puede intentar usar las sombras paralelas PNG. IE6 no lo admite, sin embargo, se degradará muy bien.

http://www.positioniseverything.net/articles/dropshadows.html

Answer 5

es posible que desee probar esto. Parece ser bastante fácil y funciona en IE6 y Moz al menos.

<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 sintaxis general es: border- [posición]: [border-style] [border-width] [border-color] | heredar

La lista de [estilo de borde] s disponible es:

• discontinua
• punteado
• doble
• ranura
• oculto
• recuadro
• ninguna
• comienzo
• cresta
• sólido
• heredar

Answer 6

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