Как сделать тень на границе?

Ответ 1

Try:

div{
-webkit-box-shadow:0px 1px 1px #de1dde;
 -moz-box-shadow:0px 1px 1px #de1dde;
 box-shadow:0px 1px 1px #de1dde;
  }

<div>wefwefwef</div>

Ответ 2

Проблема заключается в том, что тень выходит за пределы содержащего div. Чтобы избежать этого, значение размытия должно быть равно абсолютной величине значения спреда.

div {
  -webkit-box-shadow: 0 4px 6px -6px #222;
  -moz-box-shadow: 0 4px 6px -6px #222;
  box-shadow: 0 4px 6px -6px #222;
}

<div>wefwefwef</div>

Ответ 3

используйте box-shadow без горизонтального смещения.

http://www.css3.info/preview/box-shadow/

например.

div {
  -webkit-box-shadow: 0 10px 5px #888888;
  -moz-box-shadow: 0 10px 5px #888888;
  box-shadow: 0 10px 5px #888888;
}

<div>wefwefwef</div>

Ответ 4

Новый метод для старого вопроса

Похоже, что в ответах, которые были предоставлены, проблема всегда заключалась в том, что рамка рамки будет либо видна слева и справа от объекта, либо вам придется вставить ее до сих пор, чтобы она не затухала всю длину контейнер правильно.

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

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

Пример с заполнением и цветом фона на теневом div:

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

body {
  background: #eee;
}

.bottom-shadow {
  width: 80%;
  margin: 0 auto;
}

.bottom-shadow:after {
  content: "";
  display: block;
  height: 8px;
  background: transparent;
  background: -moz-linear-gradient(top, rgba(0,0,0,0.4) 0%, rgba(0,0,0,0) 100%); /* FF3.6-15 */
  background: -webkit-linear-gradient(top, rgba(0,0,0,0.4) 0%,rgba(0,0,0,0) 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to bottom, rgba(0,0,0,0.4) 0%,rgba(0,0,0,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient(   startColorstr='#a6000000', endColorstr='#00000000',GradientType=0 ); /* IE6-9 */
}

.bottom-shadow div {
  padding: 18px;
  background: #fff;
}

<div class="bottom-shadow">
  <div>
    Shadows, FTW!
  </div>
</div>