html - img - Cuadro de inserción Sombra solo en un lado?

title html attribute

Question

¿Es posible que de alguna manera solo tenga una sombra de cuadro insertada en un lado de un div? Tenga en cuenta que estoy hablando aquí de una sombra de cuadro insertada , no de la sombra de cuadro exterior normal.

Por ejemplo, en el siguiente JSFiddle, verá que la sombra del recuadro aparece en los 4 lados, en diversos grados.

¿Cómo logro que SÓLO se muestre en la parte superior? ¿O a lo sumo ÚNICAMENTE en la parte superior e inferior?

JSFiddle: http://jsfiddle.net/ahmadka/KFrun/

HTML:

<div class="myDiv">
    <div class="text">
        Lorem ipsum ....
    </div>
</div>

CSS:

.box
{
    -webkit-box-shadow: inset 0px 5px 10px 1px #000000;
    box-shadow: inset 0px 5px 10px 1px #000000;
}

.text
{
    padding:20px;   
}

Answer 1

El truco es un segundo .box-inner inside, que tiene un ancho mayor que el .box original, y la box-shadow se aplica a eso.

Luego, agregó más relleno al .text para compensar el ancho adicional.

Así es como se ve la lógica:

Y así es como se hace en CSS:

Utilice el ancho máximo para .inner-box para que no cause que .box y overflow para asegurarse de que se recorta el resto:

.box {
    max-width: 100% !important;
    overflow: hidden;
}

El 110% es más ancho que el elemento primario, que es el 100% en el contexto de un niño (debe ser el mismo cuando el .box principal tiene un ancho fijo, por ejemplo). Los márgenes negativos compensan el ancho y hacen que el elemento se centre (en lugar de ocultar solo la parte derecha):

.box-inner {
    width: 110%;
    margin-left:-5%;
    margin-right: -5%;
    -webkit-box-shadow: inset 0px 5px 10px 1px #000000;
    box-shadow: inset 0px 5px 10px 1px #000000;
}

Y agrega algo de relleno en el eje X para compensar el .inner-box más .inner-box :

.text {
    padding: 20px 40px;
}

Aquí hay un violín que funciona.

Si inspecciona el violín, verá:

Answer 2

Esto es lo que estás buscando. Tiene ejemplos para cada lado que desee con una sombra.

Vea el violín js para más ejemplos: http://jsfiddle.net/KFrun/171/

.top-box
{
    box-shadow: inset 0 7px 9px -7px rgba(0,0,0,0.4);
}
.left-box
{
    box-shadow: inset 7px 0 9px -7px rgba(0,0,0,0.4);
}
.right-box
{
    box-shadow: inset -7px 0 9px -7px rgba(0,0,0,0.4);
}
.bottom-box
{
    box-shadow: inset 0 -7px 9px -7px rgba(0,0,0,0.4);
}

Answer 3

Esto viene un poco cerca.

.box
{
    -webkit-box-shadow: inset -1px 10px 5px -3px #000000;
    box-shadow: inset -1px 10px 5px -3px #000000;
}

Answer 4

Un poco tarde, pero puede encontrar una respuesta duplicada que no requiera alterar el relleno o agregar divs adicionales aquí: Tener un problema con la parte inferior del recuadro de la sombra del recuadro solamente . Dice: "Use un valor negativo para la cuarta longitud que defina la distancia de propagación. Esto a menudo se pasa por alto, pero es compatible con todos los principales navegadores".

Del fiddle del respondedor:

box-shadow: inset 0 -10px 10px -10px #000000;

Answer 5

pruébalo, quizás útil ...

box-shadow: 0 0 0 3px rgb(255,255,255), 0 7px 3px #cbc9c9;
                    -webkit-box-shadow: 0 0 0 3px rgb(255,255,255), 0 7px 5px #cbc9c9;
                    -o-box-shadow: 0 0 0 3px rgb(255,255,255), 0 7px 5px #cbc9c9;
                    -moz-box-shadow: 0 0 0 3px rgb(255,255,255), 0 7px 5px #cbc9c9;  

encima de CSS porque tiene una sombra de cuadro en la parte inferior.
puedes rojo más Here