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

347

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

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

EDIT. Мои намерения состоят в том, чтобы создать только вертикальную часть тени. Точно так же, как и repeat-y правила background:url(shadow.png) 100% 0% repeat-y.

  • 3
    учитывая ограниченные инструменты css с точки зрения теней, я думаю, что ваш подход уже достаточно хорош. Это не слишком загромождает и оказывает довольно небольшое влияние с точки зрения семантики: только один бессмысленный div.
  • 11
    Это довольно интересно, потому что я нашел решение моей проблемы в содержании Вопроса, а не в одном из Ответов .
Показать ещё 1 комментарий
Теги:
shadow
box-shadow

10 ответов

434
Лучший ответ

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

.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 - радиус размытия:)

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

Поделиться
  • 11
    Спасибо, что указали на то, чего я не знал, но я намеревался создать только вертикальную часть тени. Точно так же, как фон: url (shadow.png) 100% 0% repeat-y будет делать.
  • 0
    Ага, хорошо, это настолько близко, насколько я могу использовать чистый CSS. Я оставлю это здесь для информирования других пользователей о распространении тени. :)
Показать ещё 16 комментариев
20

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

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

Поделиться
  • 0
    ОП был за одностороннюю тень.
  • 1
    Отредактировал мой пример так, что это одна сторона.
Показать ещё 2 комментария
9

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

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

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

Поделиться
  • 0
    Демо было бы круто :)
  • 0
    Идеальное решение, так как оно добавляет эффект тени только к одной стороне элемента, не загромождая разметку.
Показать ещё 4 комментария
3

Вот немного взломать, что я сделал.

<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;`
Поделиться
2

Просто используйте:: after или:: перед псевдоэлементом, чтобы добавить тень. Сделайте его 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>
Поделиться
  • 0
    Лучшее решение здесь, я могу настроить тень намного лучше таким образом.
2

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

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

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

Поделиться
1

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

.box{
        
        width: 400px; 
        height: 130px; 
        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>
Поделиться
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 здесь.

Поделиться
0 
div {
 border: 1px solid #666;
    width: 50px;
    height: 50px;
    -webkit-box-shadow: inset 10px 0px 5px -1px #888 ;
}
Поделиться
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>
Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню