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

Question

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

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

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

Answer 1

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

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

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

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

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

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

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

Answer 2

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

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

Answer 3

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

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

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

Answer 4

Просто используйте псевдоэлемент :: 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>

Answer 5

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

<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;`

Answer 6

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

.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>

Answer 7

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

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

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

Answer 8

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

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

Answer 9

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

<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 здесь .

Answer 10

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