Как я могу добавить box-shadow на одну сторону элемента?

Мне нужно создать тень на некотором blockэлементе, но только (например) на его правой стороне. То, как я это делаю, - это оборачиваю внутренний элемент box-shadowво внешний, padding-rightи overflow:hidden;поэтому три другие стороны тени не видны.

Есть ли лучший способ добиться этого? Как box-shadow-right?

РЕДАКТИРОВАТЬ : я намерен создать только вертикальную часть тени. Точно так же, как то, что repeat-yиз правила background:url(shadow.png) 100% 0% repeat-yбудет делать.

Да, вы можете использовать свойство распространения тени правила box-shadow:

.myDiv
{
  border: 1px solid #333;
  width: 100px;
  height: 100px;
  box-shadow: 10px 0 5px -2px #888;
}

<div class="myDiv"></div>

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

При этом также используются правила позиционирования тени, которые 10pxнаправляют его вправо (горизонтальное смещение) и 0pxудерживают его под элементом (вертикальное смещение).

5px это радиус размытия :)

Пример для вас здесь .

Мое собственное решение, которое легко редактировать:

HTML:

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

CSS:

#shadow-div{
    margin-right:20px; /* Set to 0 if you don't want shadow at the right side */
    margin-left:0px; /* Set to 20px if you want shadow at the left side */
    margin-top:0px; /* Set to 20px if you want shadow at the top side */
    margin-bottom:0px; /* Set to 20px if you want shadow at the bottom side */
    box-shadow: 0px 0px 20px black; 
    height:100px;
    width:100px;
    background: red;
}

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

Демо:
http://jsfiddle.net/jDyQt/103

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

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));
}

добавит хороший теневой эффект слева и справа от элементов, которые обычно составляют документ.

Просто используйте псевдоэлемент :: after или :: before, чтобы добавить тень. Сделайте это 1px и поместите его на любую сторону, которую вы хотите. Ниже приведен пример вершины.

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>top only box shadow</footer>

Вот мой пример:

.box{
        
        width: 400px; 
        height: 80px; 
        background-color: #C9C; 
        text-align: center; 
        font: 20px normal Arial, Helvetica, sans-serif; 
        color: #fff; 
        padding: 100px 0 0 0;
        -webkit-box-shadow: 0 8px 6px -6px black;
           -moz-box-shadow: 0 8px 6px -6px black;
                box-shadow: 0 8px 6px -6px black;
    }

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

Вот небольшой взлом, который я сделал.

<div id="element"><!--element that I want an one-sided inset shadow from the bottom--></div> 
<div class="one_side_shadow"></div>

1. Создайте <div class="one_side_shadow"></div>справа под элементом, который я хочу, чтобы создать одностороннюю тень (в этом случае я хочу, чтобы односторонняя тень была вставлена id="element"снизу)

2. Затем я создал регулярную форму, box-shadowиспользуя отрицательное вертикальное смещение, чтобы подтолкнуть тень вверх в одну сторону.

`box-shadow: 0 -8px 20px 2px #DEDEE3;`

Это может быть простой способ

border-right : 1px solid #ddd;
height:85px;    
box-shadow : 10px 0px 5px 1px #eaeaea;

Назначьте это любому div

Вот кодовый блок для демонстрации для каждой стороны или рабочий фрагмент:

.boxes {
  display: flex;
  flex-wrap: wrap;
}

.box {
  margin: 20px;
  border: 1px solid #ccc;
  font-family: Helvetica Neue, Arial, sans-serif;
  font-weight: 100;
  letter-spacing: 2px;
  color: #999;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  flex: 1;
  padding: 40px;
  line-height: 1.4em;
}

.top {
  box-shadow: 0 -5px 5px -5px #333;
}

.right {
  box-shadow: 5px 0 5px -5px #333;
}

.bottom {
  box-shadow: 0 5px 5px -5px #333;
}

.left {
  box-shadow: -5px 0 5px -5px #333;
}

<div class="boxes">
  <div class="box top">Top Only</div>
  <div class="box right">Right Only</div>
  <div class="box bottom">Bottom Only</div>
  <div class="box left">Left Only</div>
</div>

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

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

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

... в отличие от ослабленной / уменьшенной / истончающейся тени, как это:

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

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

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

box-shadow: 0 0 Xpx [hex/rgba]; /* note 0 offset values */
clip-path: inset(Apx Bpx Cpx Dpx);

Куда:

• Apx устанавливает видимость тени для верхнего края
• Bpx правильно
• Cpx дно
• Dpx оставил

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

Этот сайт помог мне: https://gist.github.com/ocean90/1268328 (Обратите внимание, что на этом сайте левая и правая перепутаны на дату этого сообщения ... но они работают, как ожидалось). Они исправлены в коде ниже.

<!DOCTYPE html>
<html>
    <head>
        <title>Box Shadow</title>

        <style>
            .box {
                height: 150px;
                width: 300px;
                margin: 20px;
                border: 1px solid #ccc;
            }

            .top {
                box-shadow: 0 -5px 5px -5px #333;
            }

            .right {
                box-shadow: 5px 0 5px -5px #333;
            }

            .bottom {
                box-shadow: 0 5px 5px -5px #333;
            }

            .left {
                box-shadow: -5px 0 5px -5px #333;
            }

            .all {
                box-shadow: 0 0 5px #333;
            }
        </style>
    </head>
    <body>
        <div class="box top"></div>
        <div class="box right"></div>
        <div class="box bottom"></div>
        <div class="box left"></div>
        <div class="box all"></div>
    </body>
</html>

div {
 border: 1px solid #666;
    width: 50px;
    height: 50px;
    -webkit-box-shadow: inset 10px 0px 5px -1px #888 ;
}

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

<div id="wrapper">
    <div id="shadow"></div>  
    <div id="content">CONTENT</div>  
</div>

<style>

div#wrapper {
  width:200px;
  height:258px;      
}

div#wrapper > div#shadow {
  display:inline-block;
  width:1px;
  height:100%;
  box-shadow: -3px 0px 5px 0px rgba(0,0,0,0.8)
}

div#wrapper > div#content {
  display:inline-block;
  height:100%;
  vertical-align:top;
}

</style>

Пример jsFiddle здесь .

Хорошо, вот еще одна попытка. Использование псевдоэлементов и применение над ними теневого блока.

HTML:

<div class="no-relevant-box">
  <div class="div-to-shadow-1"></div>
  <div class="div-to-shadow-2"></div>
</div>

дерзость:

.div-to-shadow-1, .div-to-shadow-2
  height: 150px
  width: 150px
  overflow: hidden
  transition: all 0.3s ease-in-out
  &::after
    display: block
    content: ''
    position: relative
    top: 0
    left: 100%
    height: 100%
    width: 10px
    border: 1px solid mediumeagreen
    box-shadow:  0px 7px 12px rgba(0,0,0,0.3)
  &:hover
    border: 1px solid dodgerblue
    overflow: visible

https://codepen.io/alex3o0/pen/PrMyNQ