Применить тень только к границе?

Question

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

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

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

Я хочу, чтобы тень (1px 1px 1px #cdcdcd) применялась только к border-top.

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

РЕДАКТИРОВАТЬ

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

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

Тем не менее, затенение, похоже, влияет на тень. Есть ли способ прикрепить тень только к границе без регулировки отступов?

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

<div></div>

Answer 2

Если вы хотите применить тень к внутренней части элемента (inset), но если вы хотите, чтобы он отображался только на одной стороне, вы можете определить отрицательное значение для параметра "распространение" (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

Answer 3

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

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

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

http://css3generator.com/

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

Answer 4

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

Answer 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/

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

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

Answer 7

Мое решение для добавления тени только в верхнюю часть коробки:

Если вам нужна нижняя тень, просто выполните:

      box-shadow: 0 6px 6px -6px rgb(0 0 0 / 50%)