применить тень только к границе? - PullRequest
Новая
       28

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

25 голосов
/ 20 марта 2012

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

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

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

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

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

EDIT

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

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

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

Ответы [ 4 ]

40 голосов
/ 20 марта 2012

Как то так? 

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>
3 голосов
/ 20 марта 2012

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

1 голос
/ 08 мая 2014

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

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 голос
/ 28 декабря 2013

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

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

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

http://css3generator.com/

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

...