Как добавить тень (box-shadow) только с одной стороны элемента?

clip-path стал одним из самых простых способов добиться теней на определенных сторонах элементов, особенно когда требуется эффект "чистой" тени на конкретных краях (что, как я полагаю, и искал автор вопроса). Вот пример:

.shadow-element {
    border: 1px solid #333;
    width: 100px;
    height: 100px;
    box-shadow: 0 0 15px rgba(0,0,0,0.75);
    clip-path: inset(0 -15px 0 0);
}

<div class="shadow-element"></div>

...в отличие от размытой/уменьшенной тени, как в следующем примере:

.shadow-element {
    border: 1px solid #333;
    width: 100px;
    height: 100px;
    box-shadow: 15px 0 15px -10px rgba(0,0,0,0.75);
}

<div class="shadow-element"></div>

Просто примените следующий CSS к вашему элементу:

box-shadow: 0 0 Xpx [hex/rgba]; /* обратите внимание на 0 для смещения */
clip-path: inset(Tpx Rpx Bpx Lpx);

Где:

• Tpx задаёт видимость тени для верхнего края
• Rpx для правого
• Bpx для нижнего
• Lpx для левого

Введите значение 0 для сторон, где тень должна быть скрыта, и отрицательное значение (то же самое, что и радиус размытия тени - Xpx) для сторон, где тень должна отображаться.

Вот мой собственный способ решения данной задачи, который легко редактировать:

HTML:

<div id="anti-shadow-div">
    <div id="shadow-div"></div>
</div>

CSS:

#shadow-div {
    margin-right: 20px; /* Установите в 0, если не хотите теней справа */
    margin-left: 0px; /* Установите в 20px, если хотите тень слева */
    margin-top: 0px; /* Установите в 20px, если хотите тень сверху */
    margin-bottom: 0px; /* Установите в 20px, если хотите тень снизу */
    box-shadow: 0px 0px 20px black; 
    height: 100px;
    width: 100px;
    background: red;
}

#anti-shadow-div {
    margin: 20px;
    display: table;
    overflow: hidden;
}

Демо:

Посмотреть демо

Таким образом, вы можете легко настраивать отступы и стили, изменяя соответствующие значения в коде CSS.

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

header::before, main::before, footer::before, header::after, main::after, footer::after {
    display:    block;
    content:    '';
    position:   absolute;
    width:      8px;
    height:     100%;
    top:        0px;
}

header::before, main::before, footer::before {
    left:       -8px;
    background: linear-gradient(to left, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0));
}

header::after, main::after, footer::after {
    right:      -8px;
    background: linear-gradient(to right, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0));
}

Этот код добавит приятный эффект, похожий на тень, слева и справа от элементов, которые обычно составляют документ. Псевдо-элементы ::before и ::after создают визуальные градиенты, которые помогут добиться желаемого эффекта обрезки. Надеюсь, это поможет!

Чтобы добавить тень к элементу footer, вы можете использовать псевдоэлементы ::after или ::before. Сделайте высоту тени 1 пиксель и позиционируйте её с нужной вам стороны. Ниже приведен пример с тенью сверху.

footer {
   margin-top: 50px;
   color: #fff;
   background-color: #009eff;
   text-align: center;
   line-height: 90px;
   position: relative;
}

footer::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 1px;
    top: 0;
    left: 0;
    z-index: -1;
    box-shadow: 0px 0px 10px 1px rgba(0, 0, 0, 0.75);
}

<footer>тень только сверху</footer>

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

Ваш вопрос содержит пример кода CSS и HTML. Данный фрагмент кода определяет стиль для элемента с классом .box. Давайте разберем его.

.box {
    width: 400px; /* Задает ширину элемента равной 400 пикселей */
    height: 80px; /* Задает высоту элемента равной 80 пикселей */
    background-color: #C9C; /* Устанавливает фоновый цвет элемента в светло-фиолетовый */
    text-align: center; /* Выравнивает текст по центру горизонтально */
    font: 20px normal Arial, Helvetica, sans-serif; /* Устанавливает шрифт текста размером 20 пикселей и нормальным стилем */
    color: #fff; /* Устанавливает цвет текста белым */
    padding: 100px 0 0 0; /* Задает верхний отступ в 100 пикселей, а остальные отступы равны 0 */
    -webkit-box-shadow: 0 8px 6px -6px black; /* Добавляет тень элемента для браузеров на основе WebKit */
    -moz-box-shadow: 0 8px 6px -6px black; /* Добавляет тень элемента для Firefox */
    box-shadow: 0 8px 6px -6px black; /* Добавляет тень элемента для остальных браузеров */
}

<div class="box">
</div>

Этот кусок кода HTML создаёт пустой блок с классом box, который будет отображаться в соответствии с вышеописанными стилями. Блок имеет заданные размеры, фон и текстовое оформление.

Если у вас есть дополнительные вопросы по этому коду или по тому, как добавить в него другой контент, не стесняйтесь спрашивать!