Если вы хотите, чтобы тень от блока div была только с одной стороны, попробуйте этот трюк. Сначала необходимо определить блоку определенную ширину и высоту. Затем, используя псевдоэлемент CSS :after создать эффект тени от элемента. Вот пример использования тени только снизу блока:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | .box-shadow { background-color: #FF8020; width: 160px; height: 90px; margin-top: -45px; margin-left: -80px; position: absolute; top: 50%; left: 50%; } .box-shadow:after { content: ""; width: 150px; height: 1px; margin-top: 88px; margin-left: -75px; display: block; position: absolute; left: 50%; z-index: -1; -webkit-box-shadow: 0px 0px 8px 2px #000000; -moz-box-shadow: 0px 0px 8px 2px #000000; box-shadow: 0px 0px 8px 2px #000000; } |
Источник статьи/урока: https://xozblog.ru
По материалам: http://www.hongkiat.com/blog/simple-css-snippets/