aplicar sombra paralela a la parte superior del borde solamente?

Question

¿Cómo aplica una sombra paralela a un borde de borde específico?

Por ejemplo, I tienen el siguiente código:

header nav { 
    border-top: 1px solid #202020; 
    margin-top: 25px; 
    width: 158px; 
    padding-top:25px; 
} 

Quiero una gota de sombra (1px 1px 1px #cdcdcd) aplica sólo a border-top.

¿Cuál es la mejor manera de lograrlo?

EDITAR

Esto es esencialmente lo que estoy buscando

div { 
    border-top: 1px solid #202020; 
    margin-top: 25px; 
    margin-left:25px; 
    width: 158px; 
    padding-top:25px; 
    -webkit-box-shadow: 0px 1px 1px rgba(50, 50, 50, 0.75); 
    -moz-box-shadow: 0px 1px 1px rgba(50, 50, 50, 0.75); 
    box-shadow:   0px 1px 1px rgba(50, 50, 50, 0.75); 
} 

Sin embargo, la sombra parece estar afectada por el relleno. ¿Hay alguna forma de unir la sombra solo al borde sin ajustar el relleno?

Answer 1

¿Algo como esto?

div { 
    border: 1px solid #202020; 
    margin-top: 25px; 
    margin-left:25px; 
    width: 158px; 
    height: 158px; 
    padding-top:25px; 
    -webkit-box-shadow: 0px -4px 3px rgba(50, 50, 50, 0.75); 
    -moz-box-shadow: 0px -4px 3px rgba(50, 50, 50, 0.75); 
    box-shadow:   0px -4px 3px rgba(50, 50, 50, 0.75); 
} 

http://jsfiddle.net/FrEnY/

Answer 2

La respuesta simple es que no se puede. box-shadow se aplica solo a todo el elemento. Podría usar un enfoque diferente y usar :: before en CSS para insertar un elemento alto de 1 píxel en el navegador de encabezado y configurar el sombreado de caja en ese lugar.

Answer 3

Encuentro uso de estas herramientas interactivas ayudan a visualizar lo que está pasando, y lo que es posible

http://css3gen.com/box-shadow/

http://www.cssmatic.com/box-shadow

http://css3generator.com/

Editar: Salida las otras herramientas para experimentar con los otros generadores y combinaciones Debo recordar a veces que solo porque puedes, no significa que debas hacerlo, ¡es fácil dejarse llevar!

Answer 4

Múltiples sombras de caja lo hicieron por mí.

box-shadow: 
     inset 0 -8px 4px 4px rgb(255,255,255), 
     inset 0 2px 4px 0px rgba(50, 50, 50, 0.75); 

http://jsfiddle.net/kk66f/

Answer 5

En caso de que quiera aplicar la sombra en el interior del elemento (inset), pero sólo quiero que aparezca en un solo lado se puede definir un valor negativo a la "extensión" parámetro (5º parámetro en el segundo ejemplo).

Para eliminarlo por completo, hágalo del mismo tamaño que las sombras borrosas (4º parámetro en el segundo ejemplo) pero como valor negativo.

También recuerde que debe añadir el desplazamiento a la posición y (3er parámetro en el segundo ejemplo) para que el siguiente:

box-shadow:   inset 0px 4px 3px rgba(50, 50, 50, 0.75); 

se convierte en:

box-shadow:   inset 0px 7px 3px -3px rgba(50, 50, 50, 0.75); 

Marque esta violín actualización: http://jsfiddle.net/FrEnY/1282/ y más en los parámetros de sombra de caja aquí: http://www.w3schools.com/cssref/css3_pr_box-shadow.asp

Answer 6

.item .content{ 
    width: 94.1%; 
    background: #2d2d2d; 
    padding: 3%; 
    border-top: solid 1px #000; 
    position: relative; 
} 
.item .content:before{ 
     content: ""; 
     display: block; 
     position: absolute; 
     top: 0px; 
     left: 0; 
     width: 100%; 
     height: 1px; 
     -webkit-box-shadow: 0px 1px 13px rgba(255,255,255,1); 
     -moz-box-shadow: 0px 1px 13px rgba(255,255,255,1); 
     box-shadow: 0px 1px 13px rgba(255,255,255,1); 
     z-index: 100; 
} 

Me gusta usar algo así para eso.