Применять тень к границе только сверху?

Как применить тень к конкретному краю границы?

Например, у меня есть следующий код:

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

Мне нужна тень (1px 1px 1px #cdcdcd), примененная только к границе.

Какой лучший способ достичь этого?

ИЗМЕНИТЬ

Это, по сути, то, что я ищу

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);
}

Тем не менее, на тень, похоже, воздействует наложение. В любом случае, чтобы привязать тень к границе только без корректировки отступов?

Ответы

Ответ 1

Что-то вроде этого?

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/

Ответ 2

Если вы хотите применить тень к внутренней части элемента (inset), но только хотите, чтобы она появилась на одной стороне, вы можете определить отрицательное значение для параметра "spread" (5-й параметр во втором пример).

Чтобы полностью удалить его, сделайте его тем же размером, что и размытие теней (4-й параметр во втором примере), но как отрицательное значение.

Также не забудьте добавить смещение в y-позицию (третий параметр во втором примере), чтобы следующее:

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

становится:

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

Отметьте этот обновленный скрипт: http://jsfiddle.net/FrEnY/1282/ и многое другое на параметрах box-shadow здесь: http://www.w3schools.com/cssref/css3_pr_box-shadow.asp

Ответ 3

Простой ответ заключается в том, что вы не можете. box-shadow применяется только ко всему элементу. Вы могли бы использовать другой подход и использовать:: before в CSS, чтобы вставить элемент с 1 пикселем в верхний слой и вместо этого установите вместо него тень.

Ответ 4

Я считаю, что использование этих интерактивных инструментов помогает визуализировать происходящее и что возможно

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

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

http://css3generator.com/

Изменить: ознакомьтесь с другими инструментами для экспериментов с другими генераторами и комбинациями. Я должен иногда напоминать себе, что только потому, что вы можете, это не значит, что вам нужно - его легко увлечься!

Ответ 5

Множественные тени теней сделали это для меня.

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/

Ответ 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;
}

Мне нравится использовать что-то вроде этого.