Как мне удалить только верхнюю часть коробки-тени?

Question

Я использую border-radius и box-shadow, чтобы сделать свечение вокруг элемента.

Можно ли снять только верхнюю часть box-shadow?

Живой пример

div {
    margin-top: 25px;
    color: #fff;
    height: 45px;
    margin-top: -5px;
    z-index: -10;
    padding: 26px 24px 46px;
    font-weight: normal;
    background: #000; /*#fff;*/
    border-top: 0px solid #e5e5e5;
    border-left: 1px solid #e5e5e5;
    border-right: 1px solid #e5e5e5;
    border-bottom: 1px solid #e5e5e5;
    -webkit-border-radius: 3px;
     -khtml-border-radius: 3px;
       -moz-border-radius: 3px;
            border-radius: 3px;
    -webkit-box-shadow: rgba(200,200,200,0.7) 0px 0px 10px 0px;
     -khtml-box-shadow: rgba(200,200,200,0.7) 0px 0px 10px 0px;
       -moz-box-shadow: rgba(200,200,200,0.7) 0px 0px 10px 0px;
            box-shadow: rgba(200,200,200,0.7) 0px 0px 10px 0px;
}

Редактировать: эта маленькая штука - проблема!

Answer 1

Поскольку вы используете box-shadow, вы можете использовать псевдоэлемент, чтобы создать его и поместить под свой div, располагая его так, чтобы были видны только необходимые части: http://jsfiddle.net/kL8tR/60/

Есть некоторые важные примечания:

• Псевдоэлемент должен иметь z-index: -1
• У самого div должно быть position: relative и нет z-index

Псевдоэлементы+ CSS3 = потрясающе:)

Answer 2

Это работает, но я признаю, что не знал, есть ли лучший способ (или если это возможно без добавления элемента-обертки).Было бы неплохо использовать несколько box-shadow s, но я не могу заставить их выглядеть одинаково.

См .: http://jsfiddle.net/thirtydot/8qEUc/3/

HTML:

<div id="bla">
    <div> something </div>
</div>

CSS:

#bla {
    overflow-y: hidden;
    padding: 0 10px 10px 10px;
    margin: 0 -10px
}
#bla > div {
    /* the CSS from your question here */
}

Answer 3

@ сорго; это не ваша верхняя граница, это shadow, который вы даете в своем коде

для удаления верхнего свечения вы должны определить вертикальный интервал вашей тени.

Напишите это в своей тени CSS:

box-shadow:0 3px 6px 0 rgba(200, 200, 200, 0.7) ;
-moz-box-shadow:0 3px 6px 0 rgba(200, 200, 200, 0.7) ;
-webkit-box-shadow:0 3px 6px 0 rgba(200, 200, 200, 0.7) ;
-khtml-box-shadow:0 3px 6px 0 rgba(200, 200, 200, 0.7) ;

и вы можете генерировать здесь http://css3generator.com/

ПРИМЕЧАНИЕ: есть четыре свойства тени: horizontal, vertical, blur & spread для внутренней тени вы можете определить inset для нее

Answer 4

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

box-shadow: 0 *px 10px 0 rgba(200,200,200,0.7);

Answer 5

Вы можете попробовать следующее.Мой метод использует только CSS .

Пример ссылки: http://jsfiddle.net/kL8tR/56/

div{
    margin-top: 25px;
    color: #fff;
    height: 45px;

    padding: 26px 24px 46px;

    border-left: 1px solid #e5e5e5;
    border-right: 1px solid #e5e5e5;
    border-bottom: 1px solid #e5e5e5;
    border-top: none;

    -moz-box-shadow: 0 0 10px 1px black,  0px -20px black, 0px 1px 10px rgba(255,255,255,0.7);
    -webkit-box-shadow: 0 0 10px 1px black,  0px -20px black, 0px 1px 10px rgba(255,255,255,0.7);
    box-shadow: 0 0 10px 1px black,  0px -20px black, 0px 1px 10px rgba(255,255,255,0.7);

}

В основном то, что я делаю, я создаю несколькоСлои теней, поэтому первая тень перекрывает второй слой, маскируя верхнюю часть.

Я использовал это раньше, вот моя ссылка:

Смотрите в разделе -Расслоение нескольких теней [http://www.css3.info/preview/box-shadow/]

Answer 6

Если вы используете отрицательный радиус разброса и откалибруете другие параметры в соответствии с тем, что вам нужно, это даст вам желаемый эффект.

CSS Box Shadow Negative Radius Spread

div {
  height: 100px;
  width: 100px;
  border: solid 1px black;
  -webkit-box-shadow: 5px 5px 10px -6px black;
  -moz-box-shadow: 5px 5px 10px -6px black;
  box-shadow: 5px 5px 10px -6px black;
}

<div></div>