применить тень только к border-top?

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

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

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

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

6 ответов


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

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>

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

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

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

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


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


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

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

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

http://css3generator.com/

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


несколько теней коробки сделали это для меня.

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/


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

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