¿aplicar sombra paralela solo al borde superior?

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

Por ejemplo, tengo el siguiente código:

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

Quiero una sombra paralela (1px 1px 1px #cdcdcd) aplicada solo a border-top.

¿Cuál es la mejor manera de lograr esto?

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 ser impactada por el relleno. ¿Hay alguna manera de unir la sombra al borde solo sin ajustar el relleno?

Author: MultiplyByZer0, 2012-03-20
Source

6 answers

¿Algo así? 

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);
}
<div></div>
 35
Author: danblundell,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2018-04-18 08:00:06

En caso de que desee aplicar la sombra al interior del elemento (inset) pero solo quiera que aparezca en un solo lado, puede definir un valor negativo para el parámetro "spread" (5to parámetro en el segundo ejemplo).

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

También recuerde agregar 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);

Compruebe este violín actualizado: http://jsfiddle.net/FrEnY/1282 / y más sobre los parámetros de sombra de caja aquí: http://www.w3schools.com/cssref/css3_pr_box-shadow.asp

 8
Author: dnlmzw,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2014-06-10 11:44:26

La respuesta simple es que no se puede. box-shadow se aplica solo a todo el elemento. Puedes usar un enfoque diferente y usar:: before en CSS para insertar un elemento alto de 1 píxel en header nav y establecer la sombra de caja en ese lugar.

 3
Author: Ben Clayton,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2012-03-20 18:41:00

Me parece que el uso de estas herramientas interactivas ayudan a visualizar lo que está sucediendo, y lo que es posible

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

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

Http://css3generator.com/

Editar: Echa un vistazo a las otras herramientas para experimentar con los otros generadores y combinaciones. Tengo que recordarme a veces que solo porque puedas, no significa que debas - ¡es fácil dejarse llevar!

 1
Author: shipwreck,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2013-12-28 19:27:18

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/

 1
Author: shaunw,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2014-05-08 17:37:15 
.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;
}

Estoy usando algo como esto para ello.

 0
Author: Arthur Yakovlev,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2015-05-06 21:48:45