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

Я использую 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;
}

Изменить: эта маленькая вещь - проблема! enter image description here

Ответы

Ответ 1

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

Смотрите: 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 */
}

Ответ 2

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

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

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

Псевдоэлементы + CSS3 = удивительность:)

Ответ 3

@milo; не ваша верхняя граница - это 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 для него

Ответ 4

Вы можете попробовать следующее. Мой метод использует только 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/]

Ответ 5

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

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

Ответ 6

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

CSS Box Shadow

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>