¿Cómo puedo agregar una sombra de cuadro en un lado de un elemento?

Necesito crear una caja-sombra en algún blockelemento, pero solo (por ejemplo) en su lado derecho. La forma en que lo hago es envolver el elemento interno box-shadowen uno externo padding-righty, overflow:hidden;por lo tanto, los otros tres lados de la sombra no son visibles.

¿Hay alguna forma mejor de lograr esto? Al igual que box-shadow-right?

EDITAR : Mis intenciones son crear solo la parte vertical de la sombra. Exactamente lo mismo que haría repeat-yla regla background:url(shadow.png) 100% 0% repeat-y.

Sí, puede usar la propiedad de propagación de sombra de la regla de cuadro-sombra:

.myDiv
{
  border: 1px solid #333;
  width: 100px;
  height: 100px;
  box-shadow: 10px 0 5px -2px #888;
}

<div class="myDiv"></div>

La cuarta propiedad -2pxes la extensión de la sombra, puede usarla para cambiar la extensión de la sombra, haciendo que parezca que la sombra está solo en un lado.

Esto también utiliza las reglas de posicionamiento de sombra, lo 10pxenvía a la derecha (desplazamiento horizontal) y lo 0pxmantiene debajo del elemento (desplazamiento vertical).

5px es el radio de desenfoque :)

Ejemplo para ti aquí .

Mi solución hecha a medida que es fácil de editar:

HTML:

<div id="anti-shadow-div">
    <div id="shadow-div"></div>
</div>​

css:

#shadow-div{
    margin-right:20px; /* Set to 0 if you don't want shadow at the right side */
    margin-left:0px; /* Set to 20px if you want shadow at the left side */
    margin-top:0px; /* Set to 20px if you want shadow at the top side */
    margin-bottom:0px; /* Set to 20px if you want shadow at the bottom side */
    box-shadow: 0px 0px 20px black; 
    height:100px;
    width:100px;
    background: red;
}

#anti-shadow-div{
    margin:20px;
    display:table;
    overflow:hidden;
}​

Demostración:
http://jsfiddle.net/jDyQt/103

Para obtener el efecto recortado en hasta dos lados, puede usar pseudoelementos con gradientes de fondo.

header::before, main::before, footer::before, header::after, main::after, footer::after {
    display:    block;
    content:    '';
    position:   absolute;
    width:      8px;
    height:     100%;
    top:        0px;
}

header::before, main::before, footer::before {
    left:       -8px;
    background: linear-gradient(to left, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0));
}

header::after, main::after, footer::after {
    right:      -8px;
    background: linear-gradient(to right, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0));
}

agregará un agradable efecto de sombra a la izquierda y derecha de los elementos que normalmente forman un documento.

Simplemente use :: after o :: before pseudo elemento para agregar la sombra. Hágalo 1px y colóquelo en el lado que desee. A continuación se muestra un ejemplo de arriba.

footer {
   margin-top: 50px;
   color: #fff;
   background-color: #009eff;
   text-align: center;
   line-height: 90px;
   position: relative;
}

footer::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 1px;
    top: 0;
    left: 0;
    z-index: -1;
    box-shadow: 0px 0px 10px 1px rgba(0, 0, 0, 0.75);
}

<footer>top only box shadow</footer>

Aquí está mi ejemplo:

.box{
        
        width: 400px; 
        height: 80px; 
        background-color: #C9C; 
        text-align: center; 
        font: 20px normal Arial, Helvetica, sans-serif; 
        color: #fff; 
        padding: 100px 0 0 0;
        -webkit-box-shadow: 0 8px 6px -6px black;
           -moz-box-shadow: 0 8px 6px -6px black;
                box-shadow: 0 8px 6px -6px black;
    }

<div class="box">
</div>

Aquí hay un pequeño truco que hice.

<div id="element"><!--element that I want an one-sided inset shadow from the bottom--></div> 
<div class="one_side_shadow"></div>

1. Cree un <div class="one_side_shadow"></div>derecho debajo del elemento para el que quiero crear la sombra del cuadro de un lado (en este caso, quiero una sombra insertada de un lado para que id="element"venga desde la parte inferior)

2. Luego creé un regular box-shadowusando un desplazamiento vertical negativo para empujar la sombra hacia arriba a un lado.

`box-shadow: 0 -8px 20px 2px #DEDEE3;`

Esta podría ser una manera simple

border-right : 1px solid #ddd;
height:85px;    
box-shadow : 10px 0px 5px 1px #eaeaea;

Asigne esto a cualquier div

Aquí hay un codepen para demostrar para cada lado, o un fragmento de trabajo:

.boxes {
  display: flex;
  flex-wrap: wrap;
}

.box {
  margin: 20px;
  border: 1px solid #ccc;
  font-family: Helvetica Neue, Arial, sans-serif;
  font-weight: 100;
  letter-spacing: 2px;
  color: #999;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  flex: 1;
  padding: 40px;
  line-height: 1.4em;
}

.top {
  box-shadow: 0 -5px 5px -5px #333;
}

.right {
  box-shadow: 5px 0 5px -5px #333;
}

.bottom {
  box-shadow: 0 5px 5px -5px #333;
}

.left {
  box-shadow: -5px 0 5px -5px #333;
}

<div class="boxes">
  <div class="box top">Top Only</div>
  <div class="box right">Right Only</div>
  <div class="box bottom">Bottom Only</div>
  <div class="box left">Left Only</div>
</div>

Este sitio me ayudó: https://gist.github.com/ocean90/1268328 (Tenga en cuenta que en ese sitio, la izquierda y la derecha se invierten a partir de la fecha de esta publicación ... pero funcionan como se esperaba). Se corrigen en el siguiente código.

<!DOCTYPE html>
<html>
    <head>
        <title>Box Shadow</title>

        <style>
            .box {
                height: 150px;
                width: 300px;
                margin: 20px;
                border: 1px solid #ccc;
            }

            .top {
                box-shadow: 0 -5px 5px -5px #333;
            }

            .right {
                box-shadow: 5px 0 5px -5px #333;
            }

            .bottom {
                box-shadow: 0 5px 5px -5px #333;
            }

            .left {
                box-shadow: -5px 0 5px -5px #333;
            }

            .all {
                box-shadow: 0 0 5px #333;
            }
        </style>
    </head>
    <body>
        <div class="box top"></div>
        <div class="box right"></div>
        <div class="box bottom"></div>
        <div class="box left"></div>
        <div class="box all"></div>
    </body>
</html>

div {
 border: 1px solid #666;
    width: 50px;
    height: 50px;
    -webkit-box-shadow: inset 10px 0px 5px -1px #888 ;
}

Lo que hago es crear un bloque vertical para la sombra y colocarlo al lado de donde debería estar mi elemento de bloque. Los dos bloques se envuelven en otro bloque:

<div id="wrapper">
    <div id="shadow"></div>  
    <div id="content">CONTENT</div>  
</div>

<style>

div#wrapper {
  width:200px;
  height:258px;      
}

div#wrapper > div#shadow {
  display:inline-block;
  width:1px;
  height:100%;
  box-shadow: -3px 0px 5px 0px rgba(0,0,0,0.8)
}

div#wrapper > div#content {
  display:inline-block;
  height:100%;
  vertical-align:top;
}

</style>

Ejemplo de jsFiddle aquí .

Ok, aquí hay un intento más. Usando pseudo elementos y aplicando la propiedad de la caja de sombra sobre ellos.

html:

<div class="no-relevant-box">
  <div class="div-to-shadow-1"></div>
  <div class="div-to-shadow-2"></div>
</div>

hablar con descaro a:

.div-to-shadow-1, .div-to-shadow-2
  height: 150px
  width: 150px
  overflow: hidden
  transition: all 0.3s ease-in-out
  &::after
    display: block
    content: ''
    position: relative
    top: 0
    left: 100%
    height: 100%
    width: 10px
    border: 1px solid mediumeagreen
    box-shadow:  0px 7px 12px rgba(0,0,0,0.3)
  &:hover
    border: 1px solid dodgerblue
    overflow: visible

https://codepen.io/alex3o0/pen/PrMyNQ