Enfoque clásico: propagación negativa
CSS box-shadow utiliza 4 parámetros: h-shadow, v-shadow, blur, spread:
box-shadow: 10px 0 8px -8px black;
La sombra v ( verical) se establece en 0.
El parámetro de desenfoque agrega el efecto de degradado, pero también agrega una pequeña sombra en los bordes verticales (del que queremos deshacernos).
negativo propagación reduce la sombra en todos los bordes: puedes jugar con ella tratando de eliminar esa pequeña sombra vertical sin afectar demasiado a la de los lados (es más fácil para sombras pequeñas, de 5 a 10 píxeles).
Aquí un ejemplo de violín .
Segundo enfoque: div absoluto en el costado
Agregue un div vacío en su elemento y estilícelo con un posicionamiento absoluto para que no afecte el contenido del elemento.
Aquí el violín con un ejemplo de sombra izquierda.
<div id="container">
<div class="shadow"></div>
</div>
.shadow{
position:absolute;
height: 100%;
width: 4px;
left:0px;
top:0px;
box-shadow: -4px 0 3px black;
}
Tercero: sombra de enmascaramiento
Si tiene un fondo fijo, puede ocultar el efecto de sombra lateral con dos sombras de enmascaramiento que tengan el mismo color de fondo y desenfoque = 0, por ejemplo:
box-shadow:
0 -6px white, // Top Masking Shadow
0 6px white, // Bottom Masking Shadow
7px 0 4px -3px black, // Left-shadow
-7px 0 4px -3px black; // Right-shadow
He agregado nuevamente una extensión negativa (-3px) a la sombra negra, para que no se extienda más allá de las esquinas.
Aquí el violín .