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

445

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

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

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

tillda
источник
3
Рассматривая ограниченные инструменты CSS с точки зрения теней, я думаю, что ваш подход уже достаточно хорош. Это не слишком загромождает и оказывает довольно небольшое влияние с точки зрения семантики: только один бессмысленный div.
Базз
Вот хорошая боковая тень css: stackoverflow.com/a/20596554/1491212
Армель Ларсье

Ответы:

567

Да, вы можете использовать свойство распространения тени правила 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 это радиус размытия :)

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

рукав моря
источник
12
Спасибо, что указали на то, чего я не знал, но я намеревался создать только вертикальную часть тени. Точно так же, как делает background: url (shadow.png) 100% 0% repeat-y.
до
4
@ Тильда, вы должны пометить это как ответ, чтобы оно появлялось сверху для тех, кто ищет решение. Я почти отклонил этот метод стилевого оформления, прочитав комментарии, и принял ответ.
Девин Г Род
6
Это прекрасно работает, если вы не собираетесь ослаблять тень на углах. Я сам придумал и это решение, но в большинстве случаев (для тени с одной стороны) неправильно, когда тень меньше элемента, что разрушает иллюзию (если бы это было так задумано), что этот элемент " поднял "или" 3D ".
Стивен Лу
1
@ Mr.Alien Спасибо за это, я просто удалил префикс, так как box-shadowправила были стандартизированы.
Кайл
5
но эта тень не имеет размытия, и в том числе размытие заставляет ее выходить из других частей. И если вы объясните это уменьшением спреда, он преждевременно заканчивается на той стороне, где вы действительно этого хотите. UGHHHHH
Мухаммед Умер
37

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

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

Пуйоль
источник
1
Кажется, что-то самое прямолинейное - просто контейнерный div делает меня каким-то несчастным;)
BananaAcid
1
Это единственное реальное решение. Принятый ответ все еще имеет размытие сверху и снизу тени, просто в другом положении.
Jelle Blaauw
Это не сработало для меня в Microsoft Edge или Internet Explorer 11. С другой стороны все еще было немного тени, в зависимости от уровня масштабирования. Другие браузеры были в порядке, хотя.
Сэм
Ответ на stackoverflow.com/a/24220224/238753 работал так же, как этот, но без проблем совместимости браузера, которые есть в этом ответе
Сэм
24

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

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

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

Яцек Куземчак
источник
Идеальное решение, так как оно добавляет эффект тени только к одной стороне элемента, не загромождая разметку.
Liquinaut
1
По сравнению с методом отрицательного спреда преимущество состоит в том, что он не сжимается по углам.
Кевин Кристофер Генри
3
@BananaAcid Я создал демо для всех, кому это нужно: jsfiddle.net/jDyQt/1198
zeckdude
Хорошо, это отлично работает в Chrome, Safari, Firefox, IE11 и Edge без каких-либо побочных эффектов для меня
Сэм
15

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

riegersn
источник
Это все еще простирается через край, но может быть тем, чего хотят некоторые люди
Сэм
5

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

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

Webpixstudio
источник
4

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

<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;`
atiquratik
источник
2

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

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

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

madhairsilence
источник
1

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

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

ROOT
источник
1

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) для любых ребер, где должна отображаться тень.

Люк
источник
@tillda, углубляясь в вопрос десятилетней давности - просто задаюсь вопросом, правильно ли я истолковал ваше требование "однажды в одно время" (в частности, эффект отсечения тени) - я пытался добиться именно этого и наткнулся на ваш вопрос в обработать.
Люк
0

Этот сайт помог мне: 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>
ter24
источник
0
div {
 border: 1px solid #666;
    width: 50px;
    height: 50px;
    -webkit-box-shadow: inset 10px 0px 5px -1px #888 ;
}
Ашиша Наутиял
источник
0

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

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

jim_kastrin
источник
0

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

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

Алекс
источник