CSS-тень на трех сторонах div?

Ответ 1

Здесь JS Fiddle для вас, он использует только один отдельный div для работы.

#shadowBox {
    background-color: #ddd;
    margin: 0px auto;
    padding: 10px;
    width: 220px;
    box-shadow: 0px 8px 10px gray, 
        -10px 8px 15px gray, 10px 8px 15px gray;
}

Вы устанавливаете тень внизу, внизу слева и внизу справа. С мягкими тенями это немного сложно, но это выполнимо. Для уменьшения среднего радиуса размытия тени требуется немного догадок, так что он выглядит бесшовным и не слишком темным, когда он накладывается на боковые тени.

Ответ 2

Если вы ищете что-то вроде теней дизайна материала Google:

.shadow1 {
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}
.shadow2 {
    box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
}
.shadow3 {
    box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
}
.shadow4 {
    box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
}
.shadow5 {
    box-shadow: 0 19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22);
}

Источник: https://medium.com/@Florian/freebie-google-material-design-shadow-helper-2a0501295a2d#.wyvbmcq10

Ответ 3

Здесь пример отрицательного значения Y, предложенный @Vigrond

box-shadow: 0px -8px 10px 0px rgba(0,0,0,0.15); 

Ответ 4

Если у вас есть сплошной цвет фона, вы можете выполнить это, используя комбинацию background-color и z-index. Хитрость состоит в том, чтобы дать элементу box-shadow и его предыдущее расположение братьев и сестер, затем дать предыдущему брату цвет фона и установить его на более высокий z-index, чтобы он укладывался поверх элемента с помощью box-shadow, в эффект, покрывающий его верхнюю тень.

Здесь вы можете увидеть демо: http://codepen.io/thdoan/pen/vNvpKv

Если у вас нет непосредственного предыдущего брата, вы можете также использовать псевдоэлемент, например :before или :after: http://codepen.io/thdoan/pen/ojJEMj

Ответ 5

Для полупрозрачных теней с жесткими углами (т.е. без размытия) я использовал это:

.shadow-no-top {
  position: relative;
  box-shadow: -5px 0 0 0 rgba(0,0,0,.2), 5px 0 0 0 rgba(0,0,0,.2);
}
.shadow-no-top:before {
  content: "";
  position: absolute;
  top: 100%;
  left: -5px;
  right: -5px;
  bottom: -5px;
  background-color: rgba(0,0,0,.2);
}

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

Однако для этого требуется, чтобы элемент элемента был твердым.